web-dev-qa-db-ja.com

Bootstrap 3でnavbar-navを正当化する方法

Bootstrapで navbar （navbarの内容を拡大）を正当化しようとしています。3. margin: 0 auto; max-width: 1000px;をnav*クラスに追加し、container要素を追加しようとしましたulの親として。最後のチェックとして、提案されたものを実行しました この回答ではnavbarクラスにnavbar-justifiedを追加しましたが、これによりnavbar全体を正当化せずにすべてが左側で一緒に収縮しました。

nav nav-justifiedulを実行すると、ulが中心になりますが、ulの一部ではないため、navbar-navクラスのスタイルは保持されません。また、画面が768pxより小さい場合は見栄えがよくありません。

Bootstrap 3 navbarを正当化するにはどうすればよいですか？

編集：より完全な答えに興味がある人のために、私は本番で使用するいくつかのコードがあります：

// Stylesheet
.navbar-nav>li {
  float: none;
}

// Navbar
<nav class="navbar navbar-default">
  <ul class="nav nav-justified navbar-nav">
    <li><a href="/">Home</a></li>
    <li><a href="group.html">Group</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="positions.html">Positions</a></li>
  </ul>
</nav>

そして ここにjsFiddleが動作しています 。正しく表示するには、resultボックスのサイズを拡大する必要がある場合があります。ナビゲーションを全幅に拡大せずに実際のリストを中央に配置することに関心がある場合は、 David TaiaroaのjsFiddle を参照してください。

twitter-bootstraptwitter-bootstrap-3navbar
47
josh

デフォルトでは、すべてのfloat: left要素にnavbar-nav>liプロパティが存在することがわかります。これが、それらがすべて左に寄せられている理由です。以下のコードを追加すると、navbarが中央に配置され、縮小されません。

.navbar-nav>li {
        float: none;
}

これがnavbarを中央に配置しようとしている他の誰かに役立つことを願っています。

9
josh

以下を使用して、navbarの内容を正当化できます。

@media (min-width: 768px){
  .navbar-nav{
     margin: 0 auto;
     display: table;
     table-layout: fixed;
     float: none;
  }
}

こちらをご覧ください： http://jsfiddle.net/panchroma/2fntE/

幸運を！

65
David Taiaroa

bootstrap 3 navbar-nav justifyメニューを100％幅に揃えるには、次のコードを使用できます。

@media (min-width: 768px){
    .navbar-nav {
        margin: 0 auto;
        display: table;
        table-layout: auto;
        float: none;
        width: 100%;
    }
    .navbar-nav>li {
        display: table-cell;
        float: none;
        text-align: center;
    }
}
36
Nico

より簡単なソリューションを次に示します。 「navbar-nav」クラスを削除し、「nav-justified」を追加するだけです。

4
Nishanth
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
 <div class="container">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>
<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>  
  </ul>
</div>

そしてCSSのために

@media ( min-width: 768px ) { 
    .navbar > .container {
        text-align: center;
    }
    .navbar-header,.navbar-brand,.navbar .navbar-nav,.navbar .navbar-nav > li {
        float: none;
        display: inline-block;
    }
    .collapse.navbar-collapse {
        width: auto;
        clear: none;
    }
}

ライブで見る http://www.bootply.com/103172

1
Lynnais

これは古い投稿であることは知っていますが、ソリューションを共有したいと思います。正当なナビゲーションメニューを作成しようとして数時間を費やしました。 bootstrap cssで何も変更する必要はありません。正しいクラスをhtmlに追加するだけです。

   <nav class="nav navbar-default navbar-fixed-top">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#top">Brand Name</a>
        </div>
        <div class="collapse navbar-collapse" id="collapsable-1">
            <ul class="nav nav-justified">
                <li><a href="#about-me">About Me</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact-me">Contact Me</a></li>
            </ul>
        </div>
    </nav>

このCSSコードは、画面が768pxに達すると、単純にnavbar-brandクラスを削除します。

media@(min-width: 768px){
   .navbar-brand{
        display: none;
    }
}
0
user7558471

こんにちは、正当なnavを動作させるために以下のコードを使用できます

<div class="navbar navbar-inverse">
    <ul class="navbar-nav nav nav-justified">
        <li class="active"><a href="#">Inicio</a></li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
 </div>
0
Kagiso Nyokolodi