web-dev-qa-db-ja.com

Bootstrap Navbar Center Text

最近、折りたたむbootstrap navbarを自分のWebサイトに実装しました。ただし、完全な形式の場合は問題が発生します。テキストはナビゲーションバーの左側に配置され、CSSが多くなります。設定、およびスタックオーバーフローの参照私が試した変更はどれも成功していません。ナビゲーションバーを変更して、その中のテキスト/リンクを一元化しようとしています。

        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>


        </div><!-- end navbar-header -->

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#home">Home</a>
                    <li><a href="#home">Days Out</a></li>
                    <li><a href="#home">Ghosts</a></li>
                    <li><a href="#home">Beasts</a></li>
                    <li><a href="#home">History</a></li>
                    <li><a href="#home">About Us</a></li>
                    <li><a href="#home">Gifts</a></li>
                    <li><a href="#home">Blog</a></li>
                    <li><a href="#home">Contact Us</a></li>
                </ul>
            </div><!-- end collapse -->
        </div>
csstwitter-bootstraptextcenternavbar
6
Adam Fenwick

ナビゲーションバーのfloatの動作を変更する必要があるだけで、次のスタイルを追加してみてください。

.navbar-collapse {
  text-align:center;
}
.navbar-nav {
    display:inline-block;
    float:none;
}

BootplyDemo

8
DaniP

メディアクエリを使用します。それはBootstrapの心と魂です。

ナビゲーションを折りたたむためのBS3のデフォルトのブレークポイントは767pxであるため。そのポイントの上下でどのように動作させるかを定義してみませんか。

そのような1つの可能な解決策は...

@media (min-width:768px) {
 .navbar-collapse {
    text-align:center;
    }
}

@media (max-width:767px) {
 .navbar-collapse {
    text-align:left;
    }
}
0
CChoma