Col-xs-6 div的边距始终是堆叠的。

Question

​

​

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

然而，无论我是在移动还是全桌面分辨率上测试，任何给col-xs-6div分配利润率的尝试都会导致它们相互叠加，而不是并排排列。

编辑:请求的代码

<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

​

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

​

这里是使用引导作为框(面板作为框)的最佳和最简单的方法。

Answer 2

引导网格系统需要用"row"：http://getbootstrap.com/css/#grid-example-basic包装col*元素。

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