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

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

我知道 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%;
}

然后，您可以使用以下类:容器-小和容器-大，以及容器类，例如<div class="container container-small">

关于html - 如何在Bootstrap中制作一个较小的容器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20984874/