ブートストラップナビゲーションのセンタードロップダウン

Question

ブートストラップのナビゲーションに問題がありますか？私はいくつかのドロップダウンを持つnavbarを作成したい。ナビゲーションバーの項目のすぐ下（大きなビューポート内）のドロップダウンを一元的に整列させたいと思います。

これを行う方法、つまりテキストの下にどのように配置するのかはわかりません。今、彼らは左には遠すぎます。私はmargin-left: 50px;と言って手動で右に動かすことができましたが、それはあまりにも静的で、異なるビューポートなどではよく見えません。私もflexboxを使うと考えましたが、レイアウトを完全に変更するようです。

https://jsfiddle.net/Lhs6Lcgw/

私は「当社」の下のドロップダウンを中央にしたいと思います。

Answer 1

aタグにtext-align: centerを適用する、または水平方向のリンクを中心に、それらの要素に.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>

は