Bootstrap 导航的中心下拉菜单

Question

恐怕 Bootstrap 的导航有问题。我想创建一个带有一些下拉菜单的导航栏。我想将下拉菜单居中对齐，就在导航栏项目的正下方（在大视口中）。

不过我不确定该怎么做，即如何将它们置于文本下方的中心。现在他们离左边太远了。我可以通过说 margin-left: 50px; 手动将它们移到右边，但那样太静态了，而且在不同的视口上看起来不太好等。我也考虑过使用 flexbox，但它似乎完全改变了布局。

https://jsfiddle.net/Lhs6Lcgw/

我想将下拉菜单置于 'Our Company' 下方的中央。

Answer 1

将 text-align: center 应用到 a 标签，或使用 .text-center bootstrap 帮助器 class 到这些元素以使 link 居中水平地。然后为了使菜单本身在桌面视图中居中，添加应用 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>

Bootstrap 导航的中心下拉菜单

Center Dropdowns of Bootstrap Navigation

html

css

jquery

twitter-bootstrap