Bootstrap导航的中心下拉列表

Question

我担心我在Bootstrap的导航中遇到了麻烦。我想创建一个带有一些下拉菜单的导航栏。我想在导航栏项目下（在大视口中）集中对齐下拉列表。

我不知道如何做到这一点，即如何将它们置于文本的中心。现在他们离左边太远了。我可以通过说margin-left: 50px;手动将它们移到右边，但这样会太静态，并且在不同的视口上看起来不太好等。我还想过使用flexbox，但它似乎完全改变了布局。

https://jsfiddle.net/Lhs6Lcgw/

我想将下拉列在“我们公司”的中心。

Answer 1

将text-align: center应用于a标记，或使用.text-center引导辅助程序类对这些元素进行水平居中。然后，将菜单本身置于桌面视图中心，添加应用left: 50%; transform: translateX(-50%);的媒体查询，因为菜单相对于桌面中的父级绝对定位。

.navbar {
  height: 50px;
  background-color: white !important;
  padding: 0 !important;
}
.navbar .navbar-nav {
  display: table;
  width: 100%;
  list-style: none;
}
.navbar .navbar-nav .nav-link {
  padding: 0 !important;
}
.navbar .navbar-nav li {
  display: table-cell;
  text-align: center;
}
.navbar .navbar-nav li a {
  display: block;
  text-align: center;
}
.navbar .navbar-nav li:first-child {
  text-align: left;
}
.navbar .navbar-nav li:last-child {
  text-align: right;
}

@media (min-width: 991px) {
  .dropdown-menu {
    left: 50%;
    transform: translateX(-50%);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded col-sm-10 offset-sm-1">

  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav mx-auto">

      <li class="nav-item active">
        <a class="nav-link" href="index.php">Welcome<span class="sr-only">(current)</span></a>
      </li>

      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="dropdown_angebot" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Pricing
        </a>

        <div class="dropdown-menu" aria-labelledby="dropdown_angebot">
          <a class="dropdown-item" href="softwareentwicklung.php">Action</a>
          <a class="dropdown-item" href="qualitaetssicherung.php">Another action</a>
        </div>
      </li>

      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown_unternehmen" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Our Company
        </a>

        <div class="dropdown-menu" aria-labelledby="dropdown_unternehmen">
          <a class="dropdown-item" href="geschichte.php">History</a>
          <a class="dropdown-item" href="karriere.php">Career</a>
          <a class="dropdown-item" href="klienten.php">Clients</a>
        </div>
      </li>

      <li class="nav-item active">
        <a class="nav-link" href="anfahrt.php">Get here<span class="sr-only">(current)</span></a>
      </li>

      <li class="nav-item active">
        <a class="nav-link" href="kontakt.php">Contact<span class="sr-only">(current)</span></a>
      </li>
    </ul>
  </div>
</nav>