Bootstrap：为什么在一个跨度中双击选择也会在另一个跨度中选择文本？

Question

在下面的示例中，双击选择文本“再见”会选择兄弟跨度中的文本“世界”。为什么会发生这种情况以及如何预防？

标记：

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

例子：

活生生的例子：

Plunker

编辑：没有 Bootstrap 类，行为如预期，文本“世界”未被选中 - Plunker。

Answer 1

使用 Chrome 的 devtools 逐一禁用 Bootstrap 设置的 CSS 属性表明问题出在这部分：

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

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

float 导致选择异常的问题之前已在 this question 中提到，并且发布在那里的解决方案（在第一个跨度的末尾添加一个空格）在您的示例中有效。