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

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

这被称为＆＃34; clearfixing。＆＃34;如果您对了解更多内容感兴趣，请阅读以下两篇优秀文章：

CSS Tricks: Force Element to Self-Clear its Children

David Walsh: CSS Clear Fix

Answer 2

我遇到了同样的问题。在我的情况下，更好的解决方案是添加＆＃34; clearfix＆＃34;到包含div。 Bootstrap内置了这个类，所以你不必对你的CSS做任何事情。

Answer 3

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