引导嵌套行和列不正确堆叠

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

我做了以下工作：

#dashboardContainer a {
    background: red;
    display: block;
    border: 1px solid blue;
    color: white;
    position: relative; /* Add Position */
    z-index: 1; /* Add Stack Order */
}

在使用嵌套项时，我经常使用z索引来帮助管理元素的堆栈顺序。

附加评论：

我建议将引导CSS文件更新为最新版本，因为在使用v3.0.0时，它可能是某些浏览器上的错误

• 我将其更改为v3.1.0及更高版本，行问题不再是一个问题。

Answer 2

漂浮的问题。你这个巨大的街区覆盖了前两个街区

求解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;
  }
}

Answer 3

您需要将float: left添加到包含嵌套行的div中(我已经添加了类nested，这样就可以更容易地看到)。

在这里工作：http://codepen.io/samuidavid/pen/JGzwXB

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

CSS:

@media (min-width: 768px) and (max-width: 992px) {
  .nested {
    float: left;
  }
}