引导网格中的链接在小屏幕模式下停止工作

Question

要使引导网格中的链接在所有媒体断点中都能正常工作，需要什么？

在我的例子中，链接只有在网格没有堆叠时才有效。

这是网格的样子：

<div class="row">

    <div class="col-md-6">
        <a href="#" class="room" style="height: 155.60px; width: calc(25.0% - 4px);"> <span>Item 1</span>
    </div>

    <div class="col-md-6">
        <div class="row">
            <div class="col-sm-12">
                <p>This is another row</p>
            </div>
        </div>
    </div>

</div>

工作小提琴在这里：

http://jsfiddle.net/pTw2j/8/

编辑感谢您的快速答复。我最后选择了overflow:hidden; 以避免滚动条，同时仍然解决问题。

Answer 1

问题是链接是浮动的，导致父.storey容器的高度为0。

在容器上设置overflow: auto 将解决问题。

http://jsfiddle.net/pTw2j/13/

.storey {
    overflow: auto;
}

这称为“清除修复”。如果您有兴趣了解更多信息，这里有两篇不错的文章：

CSS Tricks: Force Element to Self-Clear its Children

David Walsh: CSS Clear Fix

Answer 2

我遇到了同样的问题。在我的情况下，更好的解决方案是将“clearfix”类添加到包含的 div 中。 Bootstrap 内置了此类，因此您无需对 CSS 进行任何操作。

Answer 3

添加overflow:auto 将导致水平滚动条。最好使用解决问题的clearfix 类。