Css 调整大小后列中的引导范围溢出

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

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>

乱数假文

测试链路

---

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

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

乱数假文

测试链路

您可以像这样更改

列-*-*

类：

对于中间设备，使用

col-md-1

类使用1列，对于小型设备，可以使用

col-sm-2

类使用2列

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

乱数假文

测试链路

我在JSFIDLE中看不到您的问题，只有一些div无跨距或p标记…请查看有关问题的图片。Lorem ipsum标签重叠以测试链接它不够清晰，请使用您在图像中提供的代码编辑您的JSFIDLE，以便我们清楚地理解problem@Mivaweb我在JSFIDLE上遇到了问题，链接已更新请查看我的答案以及解决方案和说明