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

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

这被称为 “clearfixing”。如果您想了解更多，这里有两个很好的文章：

CSS Tricks: Force Element to Self-Clear its Children

David Walsh: CSS Clear Fix

Answer 2

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