Нечетное поведение выбора с сетками Bootstrap

Question

Я использую Bootstrap (3.3.6), и я заметил, что при попытке выбрать текст столбца сетки (на любом этапе Windows), нажав на него, вы получите какое-то странное поведение.

Возьмем следующее, например:

<div class="row form-horizontal"> 
    <div class="col-xs-12 col-sm-6 col-md-12"> 
     <div class="form-group mb0 sm-mb md-mb0"> 
      <label class="col-xs-12 col-sm-6 col-md-12 control-label">EAN</label> 
      <div class="col-xs-12 col-sm-6 col-md-12 form-control-static">8718286480370</div> 
     </div> 
    </div> 
</div> 

Это просто показывает этикетку, содержащую EAN и значение для него. Когда вы пытаетесь выбрать значение EAN, дважды щелкая на нем, он также выбирает метку EAN. Кто-нибудь знает, почему это так и желательно, как это сделать, просто выберите значение?

См. Ниже приведенный ниже плунжер для рабочего примера.

https://plnkr.co/edit/Fm1WGGEx1wri0VrYrC0K?p=preview

Edit:

Обратите внимание, что добавление периода или двоеточие (:) после маркируют по какой-либо причине сделать селекционную работу, как и ожидалось, но это не то, что я хочу (.). Я также попытался добавить невидимую пунктуацию, но в какой-то момент это действительно становится взломом при взломе ...

Answer 1

Чтобы ответить на мой собственный вопрос, хотя до сих пор не знаю, почему это происходит в Chrome, решение прост: поместите сетку значения на их собственной линии:

<div class="row form-horizontal"> 
    <div class="col-xs-12 col-sm-6 col-md-12"> 
     <div class="form-group mb0 sm-mb md-mb0"> 
      <label class="col-xs-12 col-sm-6 col-md-12 control-label"> 
       EAN 
      </label> 
      <div class="col-xs-12 col-sm-6 col-md-12 form-control-static"> 
       8718286480370 
      </div> 
     </div> 
    </div> 
</div>