twitter-bootstrap 将 Bootstrap 列相互堆叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19828435/
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
Stacking Bootstrap Columns over each other
提问by Vikas Raturi
I am using Bootstrapv3to develop my interface.
I use following snippet:
我正在使用Bootstrapv3来开发我的界面。
我使用以下代码段：
<div class="row">
<div class="col-sm-4 col-xs-4">
<h1>Hello...!</h1>
<p>Para 1</p>
</div>
<div class="col-sm-8 col-xs-8">
<h1>new div</h1>
<p>Para 2</p>
</div>
</div>
However, when I decrease the size(width) of browser, the columns get smaller and smaller.
I want that, after a certain limit or min-width, the divs must stack over one another instead of getting smaller.
但是，当我减小浏览器的大小（宽度）时，列会变得越来越小。
我希望，在某个限制或最小宽度之后，div 必须相互堆叠而不是变小。
回答by Surendra Bobba
Follow this link for exact sizes of columns/grids for xs, and sm, http://getbootstrap.com/css/#grid-example-mixedYou are using a custom width functionality by using
按照此链接了解 xs 和 sm 的列/网格的确切大小，http://getbootstrap.com/css/#grid-example-mixed您正在使用自定义宽度功能
<div class="col-sm-4 col-xs-4" >
This gives custom width based on the device size. Instead for the columns to get stacked over by default just use this
这会根据设备大小提供自定义宽度。而不是默认情况下将列堆叠起来，只需使用它
<div class="col-md-4">
instead of xs(xtra small) and sm(small size), use medium size as default, bootstrap will do the rest of your work. And another thing, there is also two different size for your columns(4 and 8), the view would be irregular. And another thing, if you want to continue using custom sizes for columns instead of my method, remember this : xs-4 is different as sm-4
代替 xs(xtra small) 和 sm(small size)，默认使用中等大小，bootstrap 将完成你剩下的工作。另一件事，您的列（4 和 8）也有两种不同的大小，视图将是不规则的。还有一件事，如果您想继续使用自定义列的大小而不是我的方法，请记住这一点：xs-4 与 sm-4 不同
回答by BobDroid
In bootstrap-3 "Class prefix" represents as follows:
bootstrap-3中的“类前缀”表示如下：
.col-xs - Extra small devices - Phones (<768px)
.col-xs - 超小型设备 - 手机（<768px）
.col-sm - Small devices - Tablets (≥768px)
.col-sm - 小型设备 - 平板电脑（≥768px）
.col-md - Medium devices - Desktops (≥992px)
.col-md - 中型设备 - 桌面（≥992px）
.col-lg - Large devices Desktops (≥1200px)
.col-lg - 大型设备桌面（≥1200px）
In your coding (you are asking for desktop version i think so...) you have to remove class="col-sm-8 col-xs-8"and add class="col-md-8 col-lg-8"
在您的编码中（我认为您要求的是桌面版本...）您必须删除class="col-sm-8 col-xs-8"并添加class="col-md-8 col-lg-8"
the above code results, div over one another instead of getting smaller as you need.
上面的代码结果，div 一个另一个，而不是根据需要变小。
回答by Zim
Just remove the non-stacking 'col-xs-*' grid class..
只需删除非堆叠的 'col-xs-*' 网格类..
<div class="row">
<div class="col-sm-4">
<h1>Hello...!</h1>
<p>Para 1</p>
</div>
<div class="col-sm-8">
<h1>new div</h1>
<p>Para 2</p>
</div>
</div>
Demo: http://bootply.com/92512
