Breadcrumb в одной строке

Question

Я использую Twitter Breadcrumb на моей странице html. Но пачка продолжает появляться в новой строке. Как я могу сделать это рядом с глификоном?

Это раздел DIV:

<div class="col-md-3 well pre-scrollable scroll-pane"> 
      <span class="glyphicon glyphicon-folder-close"></span> 
      <ul class="breadcrumb list-unstyled"> 
       <li ng-repeat="crumb in breadcrumb track by $index"> 
        <a href="" ng-click="loadNodeBc($index)">{{crumb}}</a> 
       </li> 
      </ul> 
      <hr> 
      <p> 
       <ul ng-repeat="node in nodes" class="list-unstyled"> 
        <li ng-repeat="value in node"><a href="" ng-click="loadNode(value)">{{value}}</a></li> 
       </ul> 
      </p> 
     </div> 

Как это выглядит сейчас:

Есть нежелательные пробелы в верхней и нижней части. Но я хочу, чтобы список появился рядом с глификоном, как если бы они были в новой строке.

Answer 1

Просто добавьте CSS inline. Элементы <ul> являются элементами блочного уровня. Я считаю, что Bootstrap автоматически добавляет глификон в display: inline-block, чтобы он мог применяться с и полями к значку.

Fiddle for you

span.glyphicon-folder-close, 
ul.breadcrumb { 
    display: inline; 
} 


    <div class="col-md-3 well pre-scrollable scroll-pane"> 
    <span class="glyphicon glyphicon-folder-close"></span> 

    <ul class="breadcrumb list-unstyled"> 
     <li><a href="">node1</a> 
     </li> 
     <li><a href="">node2</a> 
     </li> 
     <li><a href="">node3</a> 
     </li> 
     <li><a href="">node4</a> 
     </li> 
     </li> 
    </ul> 
    ..... 
    ..... 

---

Дополнение

Вот еще один способ сделать это. Оберните span и ul в отдельный контейнер, чтобы они плавали вместе. Вы должны удалить прокладку для ul.breadcrumb, поскольку она применяется автоматически.

Add containers fiddle

ul.breadcrumb { 
    padding: 0; 
} 

<div class="col-md-3 well pre-scrollable scroll-pane"> 
    <div class="col-xs-1"> 
    <span class="glyphicon glyphicon-folder-close"></span> 
    </div> 
    <div class="col-xs-11"> 
    <ul class="breadcrumb list-unstyled"> 
     <li><a href="">node1</a> 
     </li> 
     <li><a href="">node2</a> 
     </li> 
     <li><a href="">node3</a> 
     </li> 
     <li><a href="">node4</a> 
     </li> 
     </li> 
    </ul> 
</div> 
.... 
.... 

---

Дополнение # 3 (работал лучше для OP)

Вот еще лучше. Просто используйте селектор psuedo для панировки и полностью удалите span. Также удалите <hr> тег и добавить рамку к самому

Fiddle w/ psuedo

ul.breadcrumb { 
    position: relative; 
    padding-bottom: 10px; 
    border-bottom: 1px solid #ccc; 
} 

ul.breadcrumb:before { 
    position: absolute; 
    content: '\e117'; 
    font-family: 'Glyphicons Halflings'; 
    left: -10px; 
    top: 8px; 
    width: 20px; 
    height: 20px; 
} 

<div class="col-md-3 well pre-scrollable scroll-pane"> 
    <ul class="breadcrumb list-unstyled"> 
     <li><a href="">node1</a> 
     </li> 
     <li><a href="">node2</a> 
     </li> 
     <li><a href="">node3</a> 
     </li> 
     <li><a href="">node4</a> 
     </li> 
     </li> 
    </ul> 
    .... 
    .... 

Answer 2

Это может быть из-за навигационной цепочке ширины родительского сНу не хватает для показа всех.