Question

我正在使用 Bootstrap v3来开发我的界面我使用以下代码段：

    <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>

但是，当我减小浏览器的大小（宽度）时，列会越来越小我想要的是，在一定的限制或最小宽度之后，div必须叠加在一起而不是变小。

Answer 1

请按照此链接获取xs和sm，http://getbootstrap.com/css/#grid-example-mixed的列/网格的确切大小您正在使用

使用自定义宽度功能

   <div class="col-sm-4 col-xs-4" >

根据设备大小提供自定义宽度。而不是默认情况下将列堆叠起来只需使用此

   <div class="col-md-4">

而不是xs（xtra small）和sm（小尺寸），默认使用中等大小，bootstrap将完成剩下的工作。另外，您的列（4和8）也有两种不同的大小，视图将是不规则的。另外，如果你想继续使用列的自定义大小而不是我的方法，请记住：xs-4与sm-4不同

Answer 2

在bootstrap-3中，“类前缀”表示如下：

.col-xs - 超小型设备 - 电话（＆lt; 768px）

.col-sm - 小型设备 - 平板电脑（≥768px）

.col-md - 中型设备 - 台式机（≥992px）

.col-lg - 大型设备桌面（≥1200px）

在您的编码中（您要求桌面版我认为是这样......）您必须删除class="col-sm-8 col-xs-8"并添加class="col-md-8 col-lg-8"

上面的代码结果，相互重叠，而不是根据需要变小。

Answer 3

只需删除非堆叠'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>

演示：http://bootply.com/92512

堆叠Bootstrap列彼此

3 个答案: