web-dev-qa-db-ja.com

要素をBootstrap 4 Navbarの中央に配置します

何を試しても、Bootstrap navbarに何かを配置することはできません。

margin:0 auto;またはmargin-right:auto; margin-left:auto;を使用してcenter-blockクラスを使用してdivを追加しようとしました。何も機能しない、なぜ私が理解できないほど簡単なこと、私が間違っているのかを達成するのが難しいのですか？

現在のコードは次のとおりです。

<nav class="navbar navbar-fixed-top navbar-dark main-nav">
<div class="container">
    <ul class="nav navbar-nav pull-left">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Download</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
        </li>
    </ul>

    <ul class="nav navbar-nav text-center">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>

    <ul class="nav navbar-nav pull-right">
        <li class="nav-item">
            <a class="nav-link" href="#">Rates</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Help</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
</div>
csstwitter-bootstrapbootstrap-4navbar
42
LuTz

Bootstrap 4には、.mx-autoと呼ばれる新しいユーティリティがあります。中央の要素の幅を指定するだけです。

参照： http://v4-alpha.getbootstrap.com/utilities/spacing/#horizo​​ntal-centering

Bass Jobsenの回答（両端の要素の相対的な中心）とは異なり、次の例は絶対中心です。

HTMLは次のとおりです。

<nav class="navbar bg-faded">
  <div class="container">
    <ul class="nav navbar-nav pull-sm-left">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 4</a>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-logo mx-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Brand</a>
      </li>
    </ul>
    <ul class="nav navbar-nav pull-sm-right">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 5</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 6</a>
      </li>
    </ul>
  </div>
</nav>

CSS

.navbar-logo {
  width: 90px;
}
28
Victor

これを試して。

.nav-tabs > li{
    float:none !important;
    display:inline-block !important;
}

.nav-tabs {
    text-align:center !important;
}
1
Priya Rajaram

同様の問題がありました。 Bootstrap4 navbarのアンカーテキストが中央に配置されていません。アンカーのクラスにtext-centerを追加しただけです。

1
Christy

参照： https://stackoverflow.com/a/14146967/1596547 、今すぐ使用できます：

<nav class="navbar navbar-light main-nav">
<div class="container text-xs-center">
    <ul class="nav navbar-nav pull-xs-left">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Download</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
        </li>
    </ul>

    <ul class="nav navbar-nav" style="display: inline-block;">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>

    <ul class="nav navbar-nav pull-xs-right">
        <li class="nav-item">
            <a class="nav-link" href="#">Rates</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Help</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
</div>
</nav>

コンテナにtext-xs-centerを適用し、リストにdisplay: inline-block;を設定します。

1
Bass Jobsen

ドキュメントから

Navbarには、.navbar-textの助けを借りてテキストのビットを含めることができます。このクラスは、テキスト文字列の垂直方向の配置と水平方向の間隔を調整します。

.navbar-textクラスを<li>要素に適用したので、結果は

<li class="nav-item navbar-text">

これにより、リンクが私のnavbar-brandに対して垂直に中央に配置されますimg

0
austin

新しいスタイルを作る

.container {
    position: relative;
}
.center-nav {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: auto;
    max-width: 200px;
    text-align: center;
}
.center-nav li{
  text-align: center;
  width:100%;
}

Webサイト名ULを以下に置き換えます

<ul class="nav navbar-nav center-nav">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
 </ul>

お役に立てれば..

0
Ajay Makwana

mx-autoを使用してジョブを実行します

<ul class="navbar-nav mx-auto">
0
Hezy Ziv