bootstrap: тот же html не отображается правильно

Question

У меня есть 2 бутстрапа ul и один украшен, а другой нет, моя проблема в том, почему первая ul не корректно отображает, не украшена, что не так? Как вы можете видеть на примере скрипку во втором ул что совпадает с первым уль гайкой украшено т.е пространства добавлено ...

же HTML, но не украсил

<ul id="handlers-list" class="list-group"> 
     <li id="GET___asdasd" class="list-group-item"><span>/asdasd</span><span class="label label-primary">GET</span><span class="label label-primary">html</span><span style="display:none;">asdasdasd</span><button id="hnd-show-ct" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-open" aria-hidden="true"></span></button><button type="button" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></button><button type="button" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></button></li> 
    </ul> 

Same HTML, но украсил это делают правильно

<ul id="handlers-list" class="list-group"> 
     <li id="GET___asdasd" class="list-group-item"> 
      <span>/asdasd</span> 
      <span class="label label-primary">GET</span> 
      <span class="label label-primary">html</span> 
      <span style="display:none;">asdasdasd</span> 
      <button id="hnd-show-ct" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm"> 
       <span class="glyphicon glyphicon-open" aria-hidden="true"></span> 
      </button> 
      <button type="button" class="btn btn-info btn-sm"> 
       <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span> 
      </button> 
      <button type="button" class="btn btn-warning btn-sm"> 
       <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></button></li> 
    </ul> 

Here is a small js example:

Answer 1

Белые промежутки между строчными элементами трансформируются в одно пространство. Объяснение состоит в том, что встроенные элементы могут быть перемешаны с регулярным внутренним текстом родительского элемента. Так дайте место или ввести диапазон в новой строке, чтобы получить ожидаемый результат

Попробуйте так:

<li id="GET___asdasd" class="list-group-item"><span>/asdasd</span> <span class="label label-primary">GET</span><span class="label label-primary">html</span> <span style="display:none;">asdasdasd</span> 
     <button id="hnd-show-ct" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-open" aria-hidden="true"></span> 
     </button> 

     <button type="button" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span> 
     </button> 

     <button type="button" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span> 
     </button> 
    </li> 

Answer 2

может быть связано с вашей структурой кода. если вы структурировать верхний один, как нижний, то он должен работать

http://i.imgur.com/3v4M7Lw.png

Heres моментальный снимок экрана, что я изменил

Answer 3

Continuous HTML разметки, как в первом примере удаляет пространство между элементами. Второй пример имеет пробелы в разметке, что приводит к правильным выравниваниям кнопок.