CSS 如何将容器类和我的包装器一起使用 Bootstrap 3？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25177071/
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 use container class and my wrappper together Bootstrap 3?
提问by user3789976
how can I use my own fixed size wrapper and responsive container class from Bootstrap. When I use together and responsive is lost My example code :
如何从 Bootstrap 使用我自己的固定大小包装器和响应式容器类。当我一起使用并且响应丢失时我的示例代码：
<div class="container">
<div class="wrapper">
<div class="row">
<div class="col-md-12 col-ms-12">
<p>Всеки дом са нуждае от малко Коледна магия и ние имаме идеалната рецепта. Трябват ви само: 1 бр красиво украсена елха, щипка светещи лампички, малко декорация и много подаръци за твоите близки под елхата. Разгледай нашите промоционални предложения и се подгответе за най-магически празник
от годината.</p>
</div>
</div>
</div>
</div>
And CSS:
和 CSS：
.wrapper {
width: 980px;
margin: 0 auto;
}
}
class Container is defined by Bootstrap Thanks!
类 Container 由 Bootstrap 定义 谢谢！
回答by DavidG
The problem you have with your wrapper class is that it is going to break the responsive nature of Bootstrap. The best solution would be to customise the Bootstrap library directly.
你的包装类的问题是它会破坏 Bootstrap 的响应特性。最好的解决方案是直接自定义 Bootstrap 库。
Just visit http://getbootstrap.com/customize/and play with the Container sizesthere.
只需访问http://getbootstrap.com/customize/并在Container sizes那里玩。
回答by DanCouper
Put the wrapper around the container, you are literally wanting to wrap a Bootstrap container with your wrapper, so literally doing that should achieve what you want.
将包装器放在容器周围，您实际上是想用包装器包装 Bootstrap 容器，因此从字面上看，这样做应该可以实现您想要的。
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-md-12 col-ms-12">
<p>Всеки дом са нуждае от малко Коледна магия и ние имаме идеалната рецепта. Трябват ви само: 1 бр красиво украсена елха, щипка светещи лампички, малко декорация и много подаръци за твоите близки под елхата. Разгледай нашите промоционални предложения и се подгответе за най-магически празник
от годината.</p>
</div>
</div>
</div>
回答by Rakhat
If you want disable responsive for all containers in site:
1. Omit the viewport <meta name="viewport" content="width=device-width, initial-scale=1">2. Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
3. If using navbars, remove all navbar collapsing and expanding behavior.
4. For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.
如果您想禁用站点中所有容器的响应： 1. 省略视口<meta name="viewport" content="width=device-width, initial-scale=1">2. 使用单个宽度覆盖 .container 上每个网格层的宽度，例如 width: 970px !important; 确保这是在默认 Bootstrap CSS 之后。您可以选择避免 !important 使用媒体查询或某些选择器功能。3. 如果使用导航栏，请移除所有导航栏折叠和展开行为。4. 对于网格布局，使用 .col-xs-* 类来补充或代替中/大类。别担心，超小型设备网格可缩放到所有分辨率。
