面包屑在单行

Question

我在html页面中使用Twitter Breadcrumb。但是面包屑不断出现在新的界限中。我怎样才能让它出现在glyphicon旁边？

这是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>

现在的样子：

顶部和底部有不需要的空间。但是我希望列表出现在glyphicon旁边，好像它们在新行中一样。

Answer 1

只需添加一些CSS <ul>即可。 display: inline-block元素是自动块级元素。我相信Bootstrap会自动添加glyphicons为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> ..... ..... ，因此它可以应用于图标的边距和边距。

Fiddle for you

span

<强>增加：

这是另一种做法。将ul和ul.breadcrumb包裹在其自己的独立容器中，以便它们一起浮动。您必须删除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> .... .... 的自动应用的填充。

Add containers fiddle

span

添加＃3（最适合OP）

这是一种更好的方法。只需使用psuedo选择器作为痕迹，并完全删除<hr>。同时删除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> .... .... 标记并为包面条本身添加边框

Fiddle w/ psuedo

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

Answer 2

这可能是由于父div宽度不足以显示所有。