twitter-bootstrap 如何在 bootstrap.css 中调整容器大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25437722/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to resize container in bootstrap.css
提问by user3845413
How do i assign a fixed width property to the container class in bootstrap. I have tried to assign a width value to the major container but when i resize the browser, the content of the container become unresponsive.
我如何在引导程序中为容器类分配一个固定宽度的属性。我试图为主要容器分配一个宽度值，但是当我调整浏览器的大小时，容器的内容变得无响应。
<body>
<div class="container"> //This is the major container
</div>
</body>
回答by Kishore Kumar
You can either use <div class="container-fixed">or your own media query in which you can specify the custom width for various resolution.
您可以使用<div class="container-fixed">或您自己的媒体查询，您可以在其中指定各种分辨率的自定义宽度。
Here is an sample
这是一个示例
@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;
}
}
回答by Dan
The default Bootstrap .containerclass has 15px padding on both left and right sides.
默认的 Bootstrap.container类在左侧和右侧都有 15px 的填充。
You can adjust this by adding additional padding to your container:
您可以通过向容器添加额外的填充来调整它：
.container { //or use a custom class like .custom-container
padding-left: 100px;
padding-right: 100px;
}
Or you could also adjust the width of your container like so:
或者您也可以像这样调整容器的宽度：
.container {
width: 75%;
}
Both of these solutions will maintain responsiveness, but the first one will potentially cause issues with smaller screens. You could also use %'s there as well (like padding-left:10%).
这两种解决方案都将保持响应能力，但第一种解决方案可能会导致屏幕较小的问题。您也可以在那里使用 %'s （如padding-left:10%）。
Whatever you end up using depends on your specific situation and the desired outcome. You should play around with different screen resolutions and pages on your site to make sure whatever you go with works well.
您最终使用什么取决于您的具体情况和所需的结果。您应该在您的网站上使用不同的屏幕分辨率和页面，以确保您使用的任何内容都能正常工作。
