如何在bootstrap.css中调整容器大小_Css_Twitter Bootstrap_Twitter Bootstrap 3

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

css twitter-bootstrap twitter-bootstrap-3

如何在bootstrap.css中调整容器大小,css,twitter-bootstrap,twitter-bootstrap-3,Css,Twitter Bootstrap,Twitter Bootstrap 3,如何在引导中为容器类指定固定宽度属性。我曾尝试为主容器指定宽度值，但当我调整浏览器大小时，容器的内容将变得无响应 <body> <div class="container"> //This is the major container </div> </body> //这是主要的集装箱您可以使用或您自己的媒体查询，您可以在其中为各种分辨率指定自定义宽度这是一个样本 @media (min-width: 768px) {

如何在引导中为容器类指定固定宽度属性。我曾尝试为主容器指定宽度值，但当我调整浏览器大小时，容器的内容将变得无响应

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

    </div>
</body>


//这是主要的集装箱

您可以使用

或您自己的媒体查询，您可以在其中为各种分辨率指定自定义宽度

这是一个样本

@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;
    }
}

默认的引导

.container

类在左右两侧都有15px的填充

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

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

或者您也可以调整容器的宽度，如下所示：

.container { 
  width: 75%;
}

这两种解决方案都将保持响应能力，但第一种解决方案可能会导致较小屏幕出现问题。您也可以在那里使用%（比如

左填充：10%

）

你最终使用什么取决于你的具体情况和期望的结果。你应该在你的网站上使用不同的屏幕分辨率和页面，以确保你所使用的一切都能正常工作