html - Bootstrap 嵌套行和列未正确堆叠

Question

我有以下布局:

http://codepen.io/anon/pen/jWJQXW/

<div class="container" id="dashboardContainer">
    <div class="row">
        <div class="col-md-4 col-sm-6 margin-bottom-30">
            <a href="" class="lg img-wheel" id="">
            Col 1-1
            </a>
        </div>
        <div class="col-md-4 col-sm-6 margin-bottom-30">
            <a href="" class="lg img-calendar" id="viewFutureBookings">
        Col 1-2
            </a>
        </div>

        <div class="col-md-4 col-sm-12">
            <div class="row">
                <div class="col-sm-6 col-md-12 margin-bottom-30">
                    <a href="#" class="sm img-compass" id="">
                       Col 2-1
                    </a>
                </div>
                <div class="col-sm-6 col-md-12">
                    <a href="#" class="sm img-present" id="referAFriend">
Col 2-2
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

当您在 md 和 lg 中查看时效果很好。但问题是当您进入 sm 布局时，它会正确布局，但不允许您点击第一行按钮。

我找到的解决方案是删除嵌套行，但随后它破坏了我的布局，因为边距/填充已经用完了。

对于此类问题，推荐的解决方案是什么？

Answer 1

float 问题。你用 col-sm-12 覆盖前两个 block 的巨大块

解决 http://codepen.io/anon/pen/eJXbde

@media (min-width: 992px) {
  .col-sm-12 {
      clear: none;
  }
}
@media (min-width: 768px) AND (max-width: 992px) {
  .col-sm-12 {
      clear: left;
  }
}