Links in bootstrap grid stop working in small screen mode

Question

What is required to make links in bootstrap grids work throughout all the media breakpoints ?

In my case, the links work only as long as the grid is not stacked.

This is what the grid looks like:

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

The working fiddle is here:

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

Edit Thanks for the fast answer. I chose overflow:hidden; at the end to avoid scrollbars while still fixing the issue.

Answer 1

The problem is that the links are floated, resulting in a height of 0 for the parent .storey container.

Setting overflow: auto on the container will fix the problem.

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

.storey {
    overflow: auto;
}

This is referred to as "clearfixing." If you're interested in learning more, here are two good articles:

CSS Tricks: Force Element to Self-Clear its Children

David Walsh: CSS Clear Fix

Answer 2

I had the same problem. In my case a better solution was to add the class of "clearfix" to the containing div. Bootstrap has this class built in so you don't have to do anything with your CSS.

Answer 3

Adding overflow:auto will result in a horizontal scroll bar. Best to use clearfix class which resolves the issue.