bootstrap 4中的多行居中导航栏项目答案

【问题标题】：Multiline centered navbar item in bootstrap 4bootstrap 4中的多行居中导航栏项目
【发布时间】：2018-11-06 12:38:33
【问题描述】：

我有一个导航栏，当只有单行项目时它可以正常工作：

<div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">

                <li class="nav-item">
                    <a class="nav-link" href="#">FAQ</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link profile" href="#">
                        <div class="profile-info">
                            <span class="name">Артём</span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>

但是当 item 是多行时，其他 item 会失去垂直居中对齐，而是对齐顶部：

<div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">

                <li class="nav-item">
                    <a class="nav-link" href="#">FAQ</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link profile" href="#">
                        <div class="profile-info">
                            <span class="name">Артём</span>
                            <span class="balance">31337 ₽</span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>

我的 SASS 代码：

#site-header {
  background: #2d3840;
  border-bottom: solid 1px #20272d;
  height: 83px;

  .navbar-brand {
    color: white;
  }

  .nav-item {

    &:not(:first-child) {
      margin-left: 25px;
    }

    &:not(:last-child) {
      margin-right: 25px;
    }

    // General link
    a.nav-link {
      color: white;
      font-size: 16px;
      text-align: center;

      @include transition(0.5s);
      &:hover {
        @include transition(0.3s);
        color: $color-accent;
      }

      &.active {
        padding: 6px 21px 6px 21px;
        background: $color-accent;
        border-radius: 17.5px;
        box-shadow: 0 2px 10px 0 rgba(90, 175, 238, 0.6);

        &:hover {
          color: white;
          box-shadow: none;
        }
      }

      // Profile
      &.profile {
        .profile-info {
          display: inline-block;

          .name {
            display: block;
            font-weight: bold;
          }

          .balance {
            display: block;
            font-size: 16px;
            font-weight: bold;
            color: $color-accent;
          }
        }
      }
    }

  }
}

期望：

那么，当有多行项目时，如何将项目居中？

【问题讨论】：

导航栏代码似乎不足以重现该问题。你也有编译的 CSS 而不是 SASS？

标签： css twitter-bootstrap sass bootstrap-4

【解决方案1】：

删除profile-info 并将这些类用于a 标记。

d-flex - 让它成为flex
flex-column - 将其flex-direction 属性更改为column
text-right - 将其 inline 子代对齐在其右侧

<li class="nav-item">
  <a class="nav-link d-flex flex-column text-right" href="#">
    <span class="name">Артём</span>
    <span class="balance">31337 ₽</span>
  </a>
</li>

要使另一个items 在列表中心垂直对齐，请对每个li 元素使用align-self-center。

<li class="nav-item  align-self-center">
  <a class="nav-link" href="#">FAQ</a>
</li>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active  align-self-center">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item  align-self-center">
        <a class="nav-link" href="#">Link</a>
      </li>

      <li class="nav-item align-self-center">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
      <li class="nav-item  align-self-center">
        <a class="nav-link" href="#">FAQ</a>
      </li>

      <li class="nav-item ">
        <a class="nav-link d-flex flex-column text-right" href="#">
          <span class="name">Артём</span>
          <span class="balance">31337 ₽</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

【讨论】：

谢谢，但是当我将 ml-auto 用于 navbar-nav 时，项目不会拆分为两行：i.imgur.com/1wMFFO6.png 只有当我在两个跨度之间添加
时，它们才会拆分。
UPD。好的，如果我添加 display: block for spans 它工作正常。这是正确的解决方案吗？
无论您使用mr-auto 还是ml-auto，都应该如此。运行代码 sn -p 并全屏查看。我认为您的问题出在其他地方。
display:block 使span 标记为block。 a 不能包含块级元素。但是由于现在是flex，所以可以包含block级别的元素。如果找不到问题，请使用p 标签而不是span。