Question

我认为这可能是个愚蠢的问题。我想在breadcrumbs框中设置bootstrap breadcrumb垂直中心，但不知何故，这个breadcrumb在box的顶部。有人可以帮忙吗？这是jsfiddle的内联链接。

的CSS：

.breadcrumbs{
    height: 100px;
    border:3px solid
}

HTML：

<div class="breadcrumbs">
    <ul class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Library</a></li>
            <li class="active">Data</li>
     </ul>
</div>

Answer 1

试试这个css

ng-class

如果这不是你想要的，那么请发布/附上你想要如何看到面包屑的图像。

Answer 2

要使用 Bootstrap 4 ，并且不坚持使用line-height属性，可以使用.align-items-center类。

<nav aria-label="breadcrumb">
  <ol class="breadcrumb align-items-center">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

提琴：https://jsfiddle.net/SandroMiguel/s7ot2um0/

引导程序面包屑：https://getbootstrap.com/docs/4.0/components/breadcrumb/

Answer 3

<ol class="breadcrumb justify-content-center">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>

这对您有帮助

Bootstrap面包屑垂直中心

3 个答案: