7

我正在使用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 必须相互堆叠而不是变小。

4

3 回答 3

10

按照此链接获取 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(small size)，默认使用 medium size，bootstrap 将完成剩下的工作。另一件事是，您的列（4 和 8）也有两种不同的大小，视图会不规则。还有一件事，如果您想继续使用自定义列的大小而不是我的方法，请记住这一点：xs-4 与 sm-4 不同

于 2013-11-07T05:23:07.727 回答
1

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

.col-xs - 超小型设备 - 电话 (<768px)

.col-sm - 小型设备 - 平板电脑 (≥768px)

.col-md - 中型设备 - 台式机 (≥992px)

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

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

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

于 2013-11-07T06:26:32.740 回答
1

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

于 2013-11-07T15:43:09.347 回答