Question

我有以下布局：

<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

浮动问题。你用col-sm-12覆盖前两个街区的巨大阻挡

解决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 2

我做了以下事情：

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

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

补充审核：

我建议您将引导程序CSS文件更新为更新版本，因为在使用v3.0.0时某些浏览器可能存在错误

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

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

Answer 4

对于2-1和2-2 cols，你应该改变这样的代码

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

为2-2做同样的事情

Bootstrap嵌套的行和列未正确堆叠

4 个答案: