Bootstrap Zeile schafft immer noch eine Lücke auf der rechten Seite, auch wenn es Spalten innerhalb

Ich habe eine Seite, wo Container-Flüssigkeit ist das Haupt Div und dann Nav kommt. Nach nav habe ich einen Abschnitt, in dem Ansichten geladen werden, wobei der Inhalt der Zeile in Spalten aufgeteilt oder verrechnet ist. Aber wenn ich eine Zeilenklasse entweder im Abschnitt oder im div nach verwende, entsteht eine Lücke zwischen nav und page. Fügen Sie es hauptsächlich dem Behälter hinzu. Aber deshalb sollten wir Container benutzen. Und Zeile ist für Spalten also warum noch die Lücke?Bootstrap Zeile schafft immer noch eine Lücke auf der rechten Seite, auch wenn es Spalten innerhalb

<div class="container-fluid ng-scope" id="page-wrapper" ng-controller="homeCtrl as ctrl"> 
<nav><div class="container"></div></nav> 
<section> 
<div ng-controller="assumeIdCtrl as ctrl" class="row ng-scope"> 
<div class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3"> 
</div> 
</div> 
</section>

Quelle

2016-06-20 tekin

Ihr Code ist nicht ausreichend, bitte erstellen Sie eine klare Demo und das gewünschte Ergebnis. Sie können verzweigen https://jsfiddle.net/azizn/1axxbg22/ – Aziz

Ich habe das Problem tatsächlich mit Hilfe von Joël Bonet Rodríguez gefunden. Ich brauchte kein Div vor Nav. Nav funktioniert wie eine Zeile in sich selbst und wenn Abschnitt Container-Flüssigkeit hat, funktioniert Zeilenklasse danach gut. Also ist der obige Code jetzt überflüssig. Aber Sie können hier Problem mit der Zeile und nav Unterschied sehen https://jsfiddle.net/tekin/e6d68toz/ – tekin

Verwenden Sie Standard Bootstrap Nav, können Sie den Code von W3C kopieren. Dann Ihre Struktur machen richtig wie zum Beispiel:

<nav> </nav> 
<section class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-6"> 
     </div> 
     <div class="col-md-6"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12"> 
     </div> 
    </div> 
</section>

Überprüfen Sie, dass es verschiedene Containertypen sind. div, nav, apart, section, footer usw. sind standardmäßig Container. Es ist in Ordnung und genial, Bootstrap zu verwenden, aber wir müssen uns die Standardattribute von HTML-Tags merken, bevor wir einen Bootstrap starten.

Versuchen Sie es mit dem standardmäßigen Bootstrap-Navi. Ich habe ein Beispiel Portfolio es verwenden, können Sie überprüfen und untersuchen hier:

portfolio example

es ist sehr sauber js über (nur eine jQ Funktion, wenn ich falsch nicht erinnern) und es gibt nur ein bisschen handmaded css .

Quelle

2016-06-20 11:11:30 JoelBonetR

http://getbootstrap.com/components/#nav Hier gibt Bootstrap Container-Flüssigkeit als Teil des Nav, wo Nav-Links verpackt sind. Und ich habe einen generischen Container. Soll ich dann den generischen Container loswerden? Aber Zeilen müssen auch im Container sein, heißt es. – tekin

Ja, ich sah auf der Website, interessant, dass Sie nicht Zeile dort aber Spalten verwenden. Ich denke, Zeile -15px Margen ist das Problem, aber ich möchte nicht generische Bootstrap-Werte zu überschreiben. Sicher kann dieser andere HTML-Container verwendet werden und ich dachte, Abschnitt könnte in meinem Fall eine Zeile und Nav eine andere Zeile sein. – tekin

Eigentlich glaube ich, dass ich es falsch gemacht habe, indem ich den ersten Container nötig und flüssig gemacht habe. Ich fand ein Beispiel, das am besten für mich funktioniert, weil ich volle Breite für das Armaturenbrett brauche. http://getbootstrap.com/examples/dashboard/ – tekin

Versuchen Sie, den zweiten div = "Container" zu entfernen.

Manchmal Bootstrap in Kampf mit mehr als einem Container in einer Reihe. Hoffe, es könnte helfen

Quelle

2016-06-20 10:59:19 Traxstar

bootstrap Dokument sagt Navigation braucht Container. Und ich denke, dass dieses Problem unabhängig davon auftritt, dass jede Zeile nach einem statischen Nav das Problem verursacht. – tekin

Das Problem wurde behoben, indem ein anderes Container-Fluid verwendet wurde, um die Zeile vor den Spalten zu schließen. Während Container 15px Padding-Zeile gibt gibt -15px Marge auf diese Weise sie ausgleichen. – tekin

Bootstrap Zeile schafft immer noch eine Lücke auf der rechten Seite, auch wenn es Spalten innerhalb

Antwort

Verwandte Themen