Question

我想在大型电脑视图中使用col-md-2，在平板电脑视图中使用col-xs-12。

我的问题是，当我转向更大的宽度视图时，我发现每个div之间存在间隙。这在平板电脑视图中不会发生。

Html代码：

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
    <div id="wrapper">
        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-xs-12 col-md-2">
                <div class="col-xs-3 col-md-12 box1">
                    test
                </div>
                <div class="col-xs-9 col-md-12 box2">
                    test 2
                </div>

            </div>

            <div class="col-xs-12 col-md-2">
                <div class="col-xs-3 col-md-12 box1">
                    test
                </div>
                <div class="col-xs-9 col-md-12 box2">
                    test 2
                </div>

            </div>

            <div class="col-xs-12 col-md-2">
                <div class="col-xs-3 col-md-12 box1">
                    test
                </div>
                <div class="col-xs-9 col-md-12 box2">
                    test 2
                </div>

            </div>

            <div class="col-xs-12 col-md-2">
                <div class="col-xs-3 col-md-12 box1">
                    test
                </div>
                <div class="col-xs-9 col-md-12 box2">
                    test 2
                </div>

            </div>

            <div class="col-xs-12 col-md-2">
                <div class="col-xs-3 col-md-12">
                    test
                </div>
                <div class="col-xs-9 col-md-12 test2">
                    test 2
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

Jsfiddle link

任何人都可以帮我吗？谢谢！

Answer 1

您正在尝试嵌套网格。如果嵌套网格，则需要在两个列类之间添加<div class="row">以抵消填充。

例如，<div>类与col-xs-12 col-md-2类有一个直接的子<div>，其中包含col-xs-3 col-md-12 box1类。

从

更改此内容

<div class="col-xs-12 col-md-2">
    <div class="col-xs-3 col-md-12 box1">

到

<div class="col-xs-12 col-md-2">
    <div class="row">
        <div class="col-xs-3 col-md-12 box1">

我已更新您的示例以添加这些<div class="row">＆＃39;

＆＃13;

.box1 {
  background-color: grey;
}
.box2 {
  background-color: red;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div id="wrapper">
    <div class="row">
      <div class="col-md-1"></div>
      <div class="col-xs-12 col-md-2">
        <div class="row">
          <div class="col-xs-3 col-md-12 box1">
            test
          </div>
          <div class="col-xs-9 col-md-12 box2">
            test 2
          </div>
        </div>

      </div>

      <div class="col-xs-12 col-md-2">
        <div class="row">
          <div class="col-xs-3 col-md-12 box1">
            test
          </div>
          <div class="col-xs-9 col-md-12 box2">
            test 2
          </div>
        </div>
      </div>

      <div class="col-xs-12 col-md-2">
        <div class="row">
          <div class="col-xs-3 col-md-12 box1">
            test
          </div>
          <div class="col-xs-9 col-md-12 box2">
            test 2
          </div>
        </div>
      </div>

      <div class="col-xs-12 col-md-2">
        <div class="row">
          <div class="col-xs-3 col-md-12 box1">
            test
          </div>
          <div class="col-xs-9 col-md-12 box2">
            test 2
          </div>
        </div>
      </div>

      <div class="col-xs-12 col-md-2">
        <div class="row">
          <div class="col-xs-3 col-md-12">
            test
          </div>
          <div class="col-xs-9 col-md-12 test2">
            test 2
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

间隙在Bootstrap网格设置中定义。具有xs- *的类都是100％宽度的块，因此没有间隙。如果您希望网格系统在所有屏幕尺寸上都没有间隙，则需要自定义Bootstrap构建 - http://getbootstrap.com/customize/

如何在我的情况下设置响应div？

2 个答案: