引导网格中的链接在小屏幕模式下停止工作 [英] Links in bootstrap grid stop working in small screen mode

问题描述

要使引导网格中的链接在所有媒体断点中工作需要什么?

就我而言，链接仅在网格未堆叠时才起作用.

这是网格的样子:

<div class="col-md-6"><a href="#" class="room" style="height: 155.60px; width: calc(25.0% - 4px);"><span>项目 1</span>
<div class="col-md-6"><div class="row"><div class="col-sm-12"><p>这是另一行</p>

工作小提琴在这里:

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

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

解决方案

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

在容器上设置 overflow: auto 将解决这个问题.

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

.storey {溢出:自动；}

这称为清除修复".如果您有兴趣了解更多信息，这里有两篇好文章:

CSS 技巧:强制元素自行清除其子项

David Walsh:CSS 清除修复

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.

解决方案

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

这篇关于引导网格中的链接在小屏幕模式下停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！