Vertikale Navbar in voller Breite in mobilen Geräten

Question

Ich habe ein zweispaltiges Layout. Die linke Spalte enthält ein vertikales Navigationsmenü, das auf kleineren Bildschirmen zusammenklappbar ist. Weiß jemand, wie man es ohne die 15px Polsterung auf jeder Seite auf beweglichen Geräten volle Breite macht? Ich verstehe, dass dieses Padding aus den .col-Klassen kommt, aber wenn ich es auf 0px ändere, dann wird das Layout auf größeren Bildschirmen hässlich, ohne Leerzeichen.

<div class="container"> 
    <div class="row">  
     <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
      <nav class="navbar navbar-default" role="navigation"> 
       <button type="button" class="btn btn-primary btn-lg btn-block visible-xs" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1"><i class="fa fa-lg fa-bars"></i> Menu</button> 
      <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1"> 
      some content here 
      </div> 
     </div> 
     <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> 
      <div class="row"> 
       <div class="col-sm-4 col-lg-4 col-md-4"> 
       some content here 
       </div> 
       <div class="col-sm-4 col-lg-4 col-md-4"> 
       some content here 
       </div> 
       <div class="col-sm-4 col-lg-4 col-md-4"> 
       some content here 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Haben Sie versucht, das Einfügen:

@media(max-width: 767px) { .col-xs-12 { padding: 0 } }

Da XS Größe 0-767 Pixel ist, könnten Sie keine Polsterung verwendet diese.

Prost!

Answer 2

Zunächst einmal haben Sie eine falsche HTML-Markup-Bootstrap-Dokumentation für weitere Anweisungen siehe

Grid-System

• Zeilen muss innerhalb eines .Behälter (mit fester Breite) oder .Behälter platziert werden -Flüssigkeit (volle Breite) für die richtige Ausrichtung und Polsterung.
• Der Inhalt sollte innerhalb von Spalten platziert werden, und nur Spalten können unmittelbar untergeordnete Elemente von Zeilen sein.

Entnommen here

---

Eine Lösung ist, eine andere Klasse in der Zeilenelement zu verwenden und die Polsterung mit benutzerdefinierten Medienabfragen entfernen.

Media Queries

Min-Breite: Bezieht sich auf alles, was größer als oder gleich dem angegebenen Betrag.
Max-Breite: Bezieht sich auf alles, was kleiner oder gleich der angegebenen Menge ist.

col-xs- *: Extra kleine Geräte Telefone | Keine Medienabfrage erforderlich - (< 768px)
col-sm- *: Kleingeräte Tablets | @media (min-width: 768px) {} - (> = 768px)
col-md- *: Mittelgeräte Desktops | @media (min-width: 992px) {} - (> = 992px)
col-lg- *: Große Geräte Desktops | @media (min-width: 1200px) {} - (> = 1200px)

Informationen über Bootstrap 3 Rasteroptionen here