如何在bootstrap中制作一个较小的容器

Question

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

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

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

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

Answer 1

这可能对您有所帮助:

@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">