html – 如何在引导程序中创建一个较小的容器

发布时间：2020-12-14 23:09:06 所属栏目：资源来源：网络整理

导读：我使用嵌套在容器中的Bootstrap创建登录页面我知道引导程序的工作方式是基于您用来查看它的设备的宽度的网格系统,例如,如果我在我的Iphone上查看页面它看起来很好,因为我的手机的宽度很小足以使容器具有可管理的尺寸. 但是,如果我在桌面或ipad上查看页面,容

我使用嵌套在容器中的Bootstrap创建登录页面

我知道引导程序的工作方式是基于您用来查看它的设备的宽度的网格系统,例如,如果我在我的Iphone上查看页面它看起来很好,因为我的手机的宽度很小足以使容器具有可管理的尺寸.

但是,如果我在桌面或ipad上查看页面,容器的宽度看起来很荒谬,因为输入字段占据了几乎整个页面的宽度.

所以我的问题是如何设置我的容器(或包含登录表单的面板)的宽度,而不会弄乱它在移动版本上的外观,这是完美的.我知道通过设置手动宽度它不起作用,因为它还设置移动设备上的宽度.有没有一种简单的方法可以做到这一点,我只是没有在文档中看到过？

最佳答案

这可能对您有所帮助：

@media (min-width: 768px) {
    .container-small {
        width: 300px;
    }
    .container-large {
        width: 970px;
    } 
} 
@media (min-width: 992px) {
    .container-small {
        width: 500px;
    }
    .container-large {
        width: 1170px;
    } 
} 
@media (min-width: 1200px) {
    .container-small {
        width: 700px;
    }
    .container-large {
        width: 1500px;
    } 
}

.container-small,.container-large {
    max-width: 100%;
}

然后你可以在容器类旁边使用类：container-small和container-large,就像这样< div class =“container container-small”>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!