css - 调整大小后列中的 Bootstrap 跨度溢出

Question

col-sm-1 有一个 span 元素，class 是 label，col-sm-11 有一个段落 (p)。

Here is fiddle link. PS:中心分隔线需要向左拉才能重现这种情况。

当谈到调整大小时，网格表现得像

• first label overlaps on col-sm-11 p
• than label and p goes to seperate blocks

有没有办法在不改变元素结构的情况下避免这种情况？

任何帮助将不胜感激

<div class='container'>
    <div class="row">
        <div class="col-sm-1">
            <span class="label label-default">Lorem Ipsum </span>
        </div>
        <div class="col-sm-11">
            <p>
                <a>Test link </a>
            </p>
        </div>
    </div>
</div>

Answer 1

试试这个。您增加 col-sm-2，然后再次回退到 col-md-1，这样您将有更多空间用于标签夹的小设备。

<div class='container'>
    <div class="row">
        <div class="col-sm-2 col-md-1">
            <span class="label label-default">Lorem Ipsum </span>
        </div>
        <div class="col-sm-10 col-md-11">
            <p>
                <a>Test link </a>
            </p>
        </div>
    </div>
</div>