Bootstrap: Why does double click select in one span also select text in another span?

Question

With the below example, double click select on text "Goodbye" selects the text "world" in the sibling span. Why does this happen and how can it be prevented?

Markup:

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

Example:

Live example:

Plunker

Edit: without Bootstrap classes the behaviour is as expected, the text "world" is not selected - Plunker.

Answer 1

Using Chrome's devtools to disable the CSS properties set by Bootstrap one by one suggests the issue lies with this part:

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

Unfortunately, it seems as though the float property is fundamental to Bootstrap's layout.

The issue of float causing selection oddities has previously been mentioned in this question, and the solution posted there (adding a space to the end of the first span) works in your example.