html - 如何在 Bootstrap 中制作较小的容器

Question

我使用嵌套在容器中的 Bootstrap 制作登录页面

我知道 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 以及container 类，像这样<div class="container container-small">