Bootstrap Navbar Breite gleiche wie container

Ich bin mit Bootstrap 3 . ich kann nicht geben die navbar gleiche Breite mit dem container. wenn es funktioniert in den großen Bildschirm, aber nicht in anderen Bildschirmgröße. Wie kann ich eine Feste Größe meiner Navigationsleiste, das wird sich ändern, anderes Display mit der gleichen Breite wie der container hat.

<div class="row"><!--Start row-->
     <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
         <div class="container">
                <div class="navbar-header"><!-- -->
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="glyphicon glyphicon-arrow-down">Menu</span>
                    </button>

                </div>
                <div class="collapse navbar-collapse" id="collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Course List</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div><!--End Collapse-->
         </div>
     </nav><!--End Navbar-->
</div>
  • Nach dem code, den du bisher ausprobiert habe, oder erstellen Sie eine Bootply
InformationsquelleAutor Nazmul | 2014-02-04
  1. 11

    Den fix, den ich machen würde ist einfach die container Klasse in der <nav class="..."> dies wird beschränken Sie Ihre Kirchenschiff bar die angegebene Breite von der container Attribut.

    Folgenden Code:

    <nav class="navbar navbar-default navbar-inverse navbar-fixed-top container" role="navigation">
         <div class="container-fluid">
                <div class="navbar-header"><!-- -->
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="glyphicon glyphicon-arrow-down">Menu</span>
                    </button>

                </div>
                <div class="collapse navbar-collapse" id="collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Course List</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div><!--End Collapse-->
         </div>
     </nav>

    Es ist auch nicht nessicary für die <nav> verpackt in einem <div class="row"> ich hoffe, dass dies ist, was Sie gesucht haben.

    • Es funktioniert, thx bt-dasselbe passiert mit meinem Karussell-was soll ich tun..?
    • Ich bin nicht sicher, ohne zu sehen, die code aber meine Vermutung ist, das Karussell ist nicht richtig verschachtelt in Ihrem <div class="container">...</div> oder Ihre </div> ist nicht an der richtigen Stelle. Stellen Sie sicher, dass alle Inhalte, die Sie wollen, zentriert innerhalb der <div class="container">...</div> in der Regel das erste, was ich nach der navbar ist, öffnen Sie ein <div class="container> und kurz vor der </body> Sie würde Ihre </div>
    InformationsquelleAutor theRyanMark
  2. 2

    Einfach drehen Sie die Klasse container-fluid, um den Behälter, und du bist fertig. Arbeitete für mich...

    InformationsquelleAutor Ariel Altamirano
  3. 0

    haben Sie vergessen, eine Zeile der Klasse (Zeile 2)

    HTML:

    <nav class="navbar navbar-default navbar-inverse navbar-fixed-top container" role="navigation">
  <div class="row">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="glyphicon glyphicon-arrow-down">Menu</span>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="collapse">
        <ul class="nav navbar-nav">
          <li><a href="#">title</a>
          </li>
          <li><a href="#">title</a>
          </li>
          <li><a href="#">title</a>
          </li>
          <li><a href="#">title</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

    InformationsquelleAutor Larsons
Schreibe einen Kommentar