Bootstrap：为什么在一个范围内双击选择也选择另一个范围内的文本？

Question

使用下面的示例，双击选择文本“Goodbye”选择兄弟范围中的文本“world”。为什么会发生这种情况？如何防止这种情况发生？

标记：

<div class="col-xs-12">
    <span class="col-xs-6">Hello world</span>
    <span class="col-xs-6">Goodbye world</span>
</div>

示例：

实例：

Plunker

编辑：没有Bootstrap类，行为符合预期，未选择文本“world” - Plunker。

Answer 1

使用Chrome的devtools逐个禁用Bootstrap设置的CSS属性表明问题在于此部分：

.col-xs-6 {
    float: left;
}

不幸的是，float属性似乎是Bootstrap布局的基础。

先前在this question中提到了导致选择奇怪的float问题，并且在那里发布的解决方案（在第一个范围的末尾添加空格）适用于您的示例。