调整大小后，引导跨度在列中溢出

Question

col-sm-1有一个span元素，类是label，col-sm-11上有一个段落（p）。

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

在调整大小时，网格就像

  

  
• 第一个标签重叠在col-sm-11 p
上   
• 而不是标签，p转到单独的块
  

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

任何帮助将不胜感激

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

Answer 2

您可以像这样更改col-*-*类：

对于中间设备，使用{col}使用col-md-1类，对于小型设备，您可以使用类col-sm-2使用2个colls。

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