Question

图片显示了我想要呈现的内容。 col-xs-6 div是这里的主要问题;我给它们分配了一个背景颜色，使每个col-xs-6看起来像一个面板，这意味着我还需要在每个col-xs-6之间有一些可见的分离。

然而，任何在中为col-xs-6 div分配边距的任何尝试都会导致它们彼此堆叠而不是并排堆叠，无论我是在移动设备上测试还是完整的桌面分辨率。

[编辑：请求的代码]

<div class="row">
    <div class="col-xs-12 col-sm-10 col-sm-offset-1" style="padding-left:0px; padding-right:0px">
        <div class="row" data-bind="with: ElementPairs()[2]">
            <div class="row">
                <div class="col-xs-6 backgroundPanel fullpad" >
                    <div class="row">
                        <div class="col-xs-3">
                            <!-- Picture -->
                            <img class="img-responsive img-center" src="/Content/images/Land/buttons/button_blankImage.png" style="background: url('/content/images/land/buttons/button1.png') 50% 50% cover no-repeat;">
                        </div>
                        <div class="col-xs-9" data-bind="text: Caption">Some Caption here</div>
                    </div>
                </div>
                <div class="col-xs-6 backgroundPanel fullpad">
                    <div class="row">
                        <div class="col-xs-3">
                            <!-- Picture -->
                            <img class="img-responsive img-center" src="/Content/images/Land/buttons/button_blankImage.png" style="background: url('/content/images/land/buttons/button2.png') 50% 50% cover no-repeat;">
                        </div>
                        <div class="col-xs-9" data-bind="text: Caption">Some other caption here and additional description.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">
    <div class="panel panel-success">
      <div class="panel-heading">
        <h3 class="panel-title">Some Title</h3>
      </div>
      <div class="panel-body">
        <p>Some Body Content Comes here</p>
      </div>
      <div class="panel-footer">
        <p> some footer content of a box comes here</p>
      </div>
    </div>
  </div>
  <div class="col-xs-6 col-md-4">
    <div class="panel panel-danger">
      <div class="panel-heading">
        <h3 class="panel-title">Some Title</h3>
      </div>
      <div class="panel-body">
        <p>Some Body Content Comes here</p>
      </div>
      <div class="panel-footer">
        <p> some footer content of a box comes here</p>
      </div>
    </div></div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">
    <div class="panel panel-warning">
      <div class="panel-heading">
        <h3 class="panel-title">Some Title</h3>
      </div>
      <div class="panel-body">
        <p>Some Body Content Comes here</p>
      </div>
      <div class="panel-footer">
        <p> some footer content of a box comes here</p>
      </div>
    </div>
  </div>
  <div class="col-xs-6 col-sm-4">
    <div class="panel panel-info">
      <div class="panel-heading">
        <h3 class="panel-title">Some Title</h3>
      </div>
      <div class="panel-body">
        <p>Some Body Content Comes here</p>
      </div>
      <div class="panel-footer">
        <p> some footer content of a box comes here</p>
      </div>
    </div>
  </div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Some Title</h3>
      </div>
      <div class="panel-body">
        <p>Some Body Content Comes here</p>
      </div>
      <div class="panel-footer">
        <p> some footer content of a box comes here</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

这是使用bootstrap作为盒子（面板作为盒子）的最佳和最简单的方法。

Answer 2

然而，任何尝试将边距分配给col-xs-6 div 导致它们相互堆叠而不是并排，无论我是在移动设备上还是在完整桌面上进行测试分辨率。

这是答案的关键。这就是列在boostrap 3中的工作方式：

正如您所看到的，当他们创建12列的网格布局时，他们会以百分比计算宽度，以及相应的填充和边距。每列都浮动到left（或RTL的right）。

如果其中一列变得宽于标准＆＃34;计算值（在你的情况下，你添加了额外的边距），然后两个宽度为col-*-6的div块不再适合一行，最后一个浮动到下一行的左边，它看起来像堆叠了。这就是你的案例中发生的事情~~（但是，我不排除，你只是弄乱了断点:) - 但你还没有在问题中提供代码片段）~~

如果你需要放大边距，你需要同时从每列的填充/宽度给出相同的空间 - 同时 - 播放响应，并更新相应的断点。通常，没有人手动完成。建议使用less或sass mixins使用新参数生成新网格。这个主题得到了很好的解释on their official website。

P.S。在嵌套列时，不要忘记用row包装每列。不将行包含在布局中的常见错误是必要的。

Answer 3

Bootstrap网格系统要求col- *元素包含＆＃34; row＆＃34;：http://getbootstrap.com/css/#grid-example-basic

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

具有边距的Col-xs-6 div总是最终堆叠

3 个答案: