Question

如何在bootstrap中为固定宽度属性指定容器类。我试图为主容器分配一个宽度值，但是当我调整浏览器大小时，容器的内容就会没有响应。

<body>
    <div class="container"> //This is the major container

    </div>
</body>

Answer 1

您可以使用<div class="container-fixed">或您自己的媒体查询，您可以在其中指定各种分辨率的自定义宽度。

以下是一个示例

@media (min-width: 768px) {
    .my-custom-container{
        width:600px;
    }
}

@media (min-width: 992px) {
    .my-custom-container{
        width:720px;
    }
}

@media (min-width: 1200px) {
    .my-custom-container{
        width:900px;
    }
}

Answer 2

默认的Bootstrap .container类在左侧和右侧都有15px填充。

您可以通过向容器添加额外的填充来调整此项：

.container { //or use a custom class like .custom-container
  padding-left: 100px;
  padding-right: 100px;
}

或者你也可以像这样调整容器的宽度：

.container { 
  width: 75%;
}

这两种解决方案都能保持响应能力，但第一种解决方案可能会导致屏幕较小的问题。您也可以在那里使用％（例如padding-left:10%）。

无论您最终使用什么，取决于您的具体情况和期望的结果。你应该在你的网站上玩不同的屏幕分辨率和页面，以确保你的一切顺利。

如何在bootstrap.css中调整容器大小

2 个答案: