Question

如何在Bootstrap 4中创建，以便移动视图上的按钮在垂直方向上很好地对齐？徽标应位于左侧，按钮位于右侧。使用最小标记。我是否必须在按钮上设置order: 2以使其与右对齐？此外，align-items: content因垂直对齐而无法正常工作。

http://codepen.io/anon/pen/egypoe

<nav class="navbar navbar-inverse navbar-toggleable-md navbar-affix py-4">

  <div class="container">
    <div class="d-flex justify-content-between hidden-lg-up">

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler2" aria-controls="navbarToggler2" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <a class="navbar-brand" href="#">
        <img class="logo img-fluid" src="http://placehold.it/350x150">
      </a>
    </div>

    <div class="collapse navbar-collapse" id="navbarToggler2">

      <ul class="navbar-nav ml-auto mt-2 mt-md-0">
        <li class="menu-item">Link 1</li>
        <li class="menu-item">Link 2</li>
        <li class="menu-item">Link 3</li>
      </ul>
    </div>

  </div>
</nav>

body {
  background-color: #333;
}

.logo {
  max-width: 183px;
}

@media screen and (max-width: 480px) {
  .navbar-toggler {
    order: 2;
    border: 0;
  }
  .d-flex {
    align-items: center;
  }
}

ul li {
  color: #fff;
}

Answer 1

align items: content不适用于垂直居中的原因是因为该按钮具有覆盖它的align-self属性。您可以通过向按钮添加align-self: auto甚至align-self: center来解决此问题。

按钮上需要order: 2才能更改DOM中的顺序。我的意思是，还有其他方法可以使用定位和浮动，但这是最简单的flex布局。

将徽标与Bootstrap 4导航栏中的按钮垂直对齐

1 个答案: