webentwicklung-frage-antwort-db.com.de

Twitter Bootstrap - Navbar in voller Breite

Nach dem Beispiel von TB habe ich eine Navigationsleiste, die wie folgt gekennzeichnet ist:

<div class="container">
    <div class="navbar">
        <div class="navbar-inner">
                   <!-- nav bar items here -->
        </div>
    </div>
</div>

Ich möchte, dass dies die gesamte Breite des Bildschirms abdeckt und keine abgerundeten Ecken aufweist - ähnlich wie bei der statischen oberen Gestaltung der Navigationsleiste.

Ich kann anscheinend nicht finden, wie man dies in TB macht. Wenn es keinen Weg gibt, welches CSS würde ich benötigen, um TB zu überschreiben und die Reaktionsfähigkeit nicht zu unterbrechen?

24

Ändern Sie einfach den Klassencontainer wie folgt in Container-Vollbreite:

<div class="container-fullwidth">
32
Arnaud Bouchot

Ich bin nicht sicher, ob die Klasse navbar-static-top vor Version 2.2.2 verfügbar war, aber ich denke, Sie können Ihr Ziel folgendermaßen erreichen:

<div class="navbar navbar-static-top">
    <div class="navbar-inner">
        <ul class="nav">
            <li class="active"><a href="#">Test1</a></li>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
            <li><a href="#">Test4</a></li>
            <li><a href="#">Test5</a></li>
        </ul>
    </div>
</div>
<div class="container">
    ...
</div>

Ich habe ein jsFiddle als Beispiel zusammengestellt .

26
ahsteele

Legen Sie die Navbar aus Ihrem Container:

<div class="navbar">
    <div class="navbar-inner">
               <!-- nav bar items here -->
     </div>
</div>
<div class="container">

</div>

BEARBEITEN: 

Hier ist eine, die ich mit responsive Navbar gemacht habe. Der Code passt zum Dokumentkörper:

    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
        <div class="container">

          <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          </a>

          <!-- Be sure to leave the brand out there if you want it shown -->
          <a class="brand" href="#">Project name</a>


          <!-- Everything you want hidden at 940px or less, place within here -->
          <div class="nav-collapse">
          <!-- .nav, .navbar-search, .navbar-form, etc -->
          <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li class="divider-vertical"></li>
              <li><a href="#">Link</a></li>
              <li class="divider-vertical"></li>
              <li><a href="#">Link</a></li>
            </ul>
          <ul class="nav pull-right">
            <li><a href="#">Log out</a></li>
          </ul>
          </div>

          </div>
        </div>

    </div>
  <div class="container">
    <div class="row">
      <div class="span12">

      </div>
    </div>


  </div> <!-- end container -->
  <script type="text/javascript" src="/assets/js/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>
15
RRikesh

Ich bin sehr spät bei der Party, aber diese Antwort wird in den Google-Suchergebnissen ganz oben angezeigt.

Bootstrap 3 hat eine Antwort auf dieses Problem eingebaut. Setzen Sie das Container div in Ihrer Navbar auf container-fluid und es wird auf die Bildschirmbreite fallen.

So wie:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="/">More Stuff</a></li>
      </ul>
    </div>
  </div>
</div>
12
Chris

Ersetzen Sie einfach <div class="container"> durch <div class="container-fluid">, bei dem es sich um den Container handelt, der auf beiden Seiten keine Ränder hat.

Ich denke, dass dies die beste Lösung ist, weil dadurch unnötiges Überschreiben vermieden wird und integrierte Klassen verwendet werden. Es ist sauber.

1

Sie müssen den Container in der Navigationsleiste nach unten drücken. 

Meine Arbeitsgeige finden Sie hier http://jsfiddle.net/meetravi/aXCMW/1/

<header>

    <h2 class="title">Test</h2>
</header>
<div class="navbar">
    <div class="navbar-inner">
        <ul class="nav">
            <li class="active"><a href="#">Test1</a></li>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
            <li><a href="#">Test4</a></li>
            <li><a href="#">Test5</a></li>

        </ul>
    </div>
</div>
<div class="container">

</div>
1
Ravi

Sie müssen col-md-12 zu Ihrer inneren Navigationsleiste hinzufügen. md ist für den Desktop. Sie können andere Optionen aus der Liste der Optionen von bootstrap auswählen. 12 in col-md-12 steht für volle Breite. Wenn Sie die halbe Breite wünschen, können Sie 6 anstelle von 12 verwenden. col-md-6.

Hier ist die Lösung für Ihre Frage

    <div class="container">
       <div class="navbar">
          <div class="navbar-inner col-md-12">
               <!-- nav bar items here -->
          </div>
       </div>
   </div>
0
sanjay mundhra

Setzen Sie Ihr <nav>element aus dem <div class='container-fluid'>. Ex : -

<nav>
 ......nav content goes here
<nav>

<div class="container-fluid">
  <div>
   ........ other content goes here
  </div>
</div>

0

Sie können einige CSS überschreiben

body {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.navbar-inner {
    border-radius: 0px !important;
}

Der !important wird nur für den Fall benötigt, dass Sie den bootstrap.css nach Ihrer benutzerdefinierten CSS verknüpfen.

Und fügen Sie Ihre nav-HTML aus einem .container hinzu

0
silviomoreto

Um den Randradius an den Ecken zu entfernen, fügen Sie diesen Stil Ihrer custom.css-Datei hinzu 

    .navbar-inner{
       -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
    }
0
Joseph N.

Ich weiß, ich bin ein bisschen zu spät zur Party, aber ich bin um das Problem herumgekommen, indem ich das CSS so angepasst habe, dass die Breite 100% beträgt, und die L/R-Ränder auf 0px gesetzt wurden. 

#div_id
{
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
}
0