So erstellen Sie ein flüssiges Bootstrap 3-Layout ohne horizontale Bildlaufleiste

Hier ist ein Beispiellink: http://bootply.com/76369

Das ist HTML, das ich benutze.

<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Bootstrap 3 hat keine Behälterflüssigkeit und Reihenflüssigkeit.

Ich kann es nicht mit der .container-Klasse umschließen, da es ein festes Layout wird.

Wie macht man das Layout flüssig (volle Seitenbreite) ? ( ohne horizontale Bildlaufleiste )

mit diesen Markups. Wenn Sie das Ergebnis anzeigen, ist die X-Scroll- Leiste sichtbar, sodass Sie nach links und rechts scrollen können, ohne dass dies der Fall sein sollte.

bearbeitet: 09.12.2015
Bereits beantwortet und Bootstrap hat das Update bereits seit 3.1.0 veröffentlicht

Dies wurde in Version 3.1.0 eingeführt: http://getbootstrap.com/css/#grid-example-fluid

Commit # 62736046 fügte hinzu. ".Container-Fluid-Variation für Container und Layouts voller Breite".

Ich habe es auch und während ich darauf warte, dass sie es reparieren, fügte ich diese Schande hinzu:

body { overflow-x: hidden;}

Es ist eine schreckliche Alternative, aber es funktioniert. Ich werde es gerne entfernen, wenn das Problem behoben ist.

Eine andere Alternative, auf die in der Ausgabe hingewiesen wird , besteht darin, Folgendes zu überschreiben .row:

.row {
  margin-left: 0px;
  margin-right: 0px;
}

Dies ist ein bekanntes Problem in BS 3 - https://github.com/twbs/bootstrap/issues/9862?source=cc

Ich habe auf Bootply mit dem neuesten Build getestet, also schau weiter bei GitHub nach den neuesten Updates / Fixes.

In Bootstrap 3 muss .rowis innerhalb eines .containeroder verwendet werden .container-fluid, um den negativen Rändern in der Zeile entgegenzuwirken. Dadurch wird die horizontale Bildlaufleiste entfernt.

Aus den Dokumenten ...

"Die Reihen müssen in einem Behälter (feste Breite) oder einer Behälterflüssigkeit (volle Breite) platziert werden, damit sie richtig ausgerichtet und gepolstert werden können."

Bootstrap 4

Die container> row> colBeziehung funktioniert auf die gleiche Art und Weise wie 3.x ...

"Container sind das grundlegendste Layoutelement in Bootstrap und werden benötigt, wenn Sie unser Standardgittersystem verwenden."

Wenn ich Sie richtig verstehe, überschreibt das Hinzufügen nach Medienabfragen die Breitenbeschränkungen für die Standardraster. Funktioniert für mich auf Bootstrap 3, wo ich ein Layout mit 100% Breite benötigte

.container {
   max-width: 100%;
   /* This will remove the outer padding, and push content edge to edge */
   padding-right: 0;
   padding-left: 0;
 }

Anschließend können Sie Ihre Zeilen- und Rasterelemente in den Container einfügen.

Update von 2014 aus Bootstrap-Dokumenten:

Raster und Layouts in voller Breite Personen, die vollständig flüssige Layouts erstellen möchten (dh Ihre Site erstreckt sich über die gesamte Breite des Ansichtsfensters), müssen ihren Rasterinhalt in ein enthaltenes Element mit Auffüllung einschließen: 0 15px; um den Rand auszugleichen : 0 -15px; wird auf .rows verwendet.

Nur meine 2 Cent hier. Meistens funktioniert das für Sie genauso wie für mich.

body > .row {
    margin-left: 0px;
    margin-right: 0px;
}

Ich bin auf dasselbe Problem gestoßen (wollte ein flüssiges Layout), wollte aber die Reaktionsoptionen mit der Neuanordnung von Spalten usw. für kleinere Bildschirme beibehalten und habe am Ende eine kleine Änderung an in variables.less vorgenommen:

// Large screen / wide desktop  (last row of file)
@container-lg-desktop:        100%; //((1140px + @grid-gutter-width));

Dieser Wert wird einmal in grid.less und sets verwendet

@media (min-width: @screen-lg-desktop) {
  .container {
    max-width: @container-lg-desktop;
  }
  ....
}

Das Ergebnis ist, dass das Raster über 1200px flüssig ist (ohne horizontale Bildlaufleisten). Darunter gelten die normalen Reaktionsregeln. Sie können dies natürlich genauso einfach auf andere Medienabfragen einstellen.

Wenn Sie .less selbst nicht bearbeiten und kompilieren möchten, können Sie die maximale Breite in Ihrem eigenen Stylesheet wie folgt überschreiben:

@media (min-width: 1200px) {  /* or min-width: wherever-you-want-your-fluid-breakpoint */
  body .container {
    max-width: 100%;
  }
}

All dies setzt voraus, dass Sie die normale Bootstrap-Grid-Syntax verwenden, einschließlich Container, wie unten:

<div class="container">
  <div class="row" >
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
  </div>
</div>

Hoffe das hilft!

In der neuesten Version von Twitter Bootstrap ist das Layout standardmäßig flüssig, daher benötigen Sie keine zusätzlichen Klassen, um Ihr Layout als flüssig zu deklarieren.

Sie können weiter verweisen auf -

http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/ http://blog.getbootstrap.com/

Das hat bei mir funktioniert. Getestet in FF, Chrome, IE11, IE10

.row {
    width:99.99%;
}

Die horizontale Bildlaufleiste kann angezeigt werden, wenn das container-fluiddiv direkt in der platziert wird body.

Die richtige Art, eine container-fluidStruktur zu verwenden , ist:

<body>
    <section>
        <div class="container-fluid">
            <div class="row">
                <!-- content goes here -->
            </div>
        </div>
    </section>
</body>

Also, versuchen Sie Ihre Verpackung container-fluidDIVs innerhalb eines äußeren div, wie ein <div id="wrap">oder ein <section>oder <article>oder <aside>oder andere spezialisiert <div>, und presto! keine horizontale Bildlaufleiste.

Wenn Sie in Bootstrap 3 Spalten unmittelbar unter dem Text platzieren, erhalten Sie ein flüssiges Layout ohne horizontale Bildlaufleiste

<body>
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</body>

Die Bootstrap 3.0-Version ist schwierig. Sie werden eine Lösung für dieses Problem hinzufügen und wahrscheinlich Container-Fluid in Bootstrap 3.1 zurückgeben. Aber bis dahin ist hier ein Fix, den ich benutze:

Zunächst benötigen Sie einen benutzerdefinierten Container und stellen ihn auf 100% Breite ein. Anschließend müssen Sie die Zeilenranddisposition und die Navigationsleiste korrigieren, wenn Sie über Folgendes verfügen:

/* Custom container */
.container-full {
  margin: 0 auto;
  width: 100%;
}

/*fix row -15px margin*/
.container-fluid {
    padding: 0 15px;
}

/*fix navbar margin*/
.navbar{
  margin: 0 -15px;
}

/*fix navbar-right margin*/
.navbar-nav.navbar-right:last-child {
  margin-right: 0px;
}

Sie können Container-Full- und Container-Fluid-Klassen auf root div stapeln und später Container-Fluid verwenden.

Hoffe es hilft, wenn Sie weitere Informationen benötigen, lassen Sie es mich wissen.

Diese Problemumgehung gefunden

.row {
  margin-left: 0;
  margin-right: 0;
}
[class^="col-"] > [class^="col-"]:first-child,
[class^="col-"] > [class*=" col-"]:first-child
[class*=" col-"] > [class^="col-"]:first-child,
[class*=" col-"]> [class*=" col-"]:first-child,
.row > [class^="col-"]:first-child,
.row > [class*=" col-"]:first-child{
  padding-left: 0px;
}
[class^="col-"] > [class^="col-"]:last-child,
[class^="col-"] > [class*=" col-"]:last-child
[class*=" col-"] > [class^="col-"]:last-child,
[class*=" col-"]> [class*=" col-"]:last-child,
.row > [class^="col-"]:last-child,
.row > [class*=" col-"]:last-child{
    padding-right: 0px;
}

Das hat bei mir funktioniert. Ich habe einen Stil inline hinzugefügt, um den kleinen Rand rechts zu entfernen. Ich mag Inline-Styling nicht wirklich, aber dieses einsame Stilattribut in meinem HTML macht es mir leicht, mich an den Hack-Job zu erinnern, der in meinen ansonsten gut getrennten Code eingebunden ist. Es beseitigt auch die Bedenken, dass meine externen Stile vor oder nach dem Bootstrap-Standard-Stylesheet geladen werden.

<div class="row" style="margin-right:0px;">
  <div class="col-md-6">
  <div class="col-md-6">
</div>

Auf den Körper auftragen scheint die horizontale Bildlaufleiste loszuwerden

overflow-x: hidden;

Wenn es für jemanden noch aktuell ist, war meine Lösung wie folgt:

.container{
    overflow: hidden;
    overflow-y: auto;
}

Es ist standardmäßig bereits flüssig. Wenn Sie für weniger Breite Flüssigkeit sein , statt col-md-6Verwendung col-sm-6oder col-xs-6.

Sie können dieses Problem beheben, ohne das Bootstrap-CSS zu stören, und auf eine Korrektur in der nächsten Version warten. Sie können Ihre Zeile also einfach umbrechen, indem Sie Ihre eigene Klasse .container-fluid mit Auffüllung definieren.

//Add this class to your global css file
<style>
   .container-fluid {
       padding: 0 15px;  
   }
</style>

   //Wrap your rows in within this .container-fluid 
   <div class="container-fluid">
      <div class="row">
          <div class="col-md-3">content</div>
          <div class="col-md-9">content</div>
          <div class="col-md-3">content</div>
      </div>
   </div> 

Sie können Ihrem Körperelement eine 10-Pixel-Polsterung an den Seiten hinzufügen, wenn alle untergeordneten Elemente Zeilen sind

body {
  padding: 0 10px;
}

Wenn Ihr HTML-Markup ungefähr so ​​aussieht:

<body>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
</body>

Die Zeilen haben einen negativen Rand von 10 px. Das ist es, was den Überlauf verursacht. Wenn Sie dem Körper eine 10-Pixel-Polsterung hinzufügen, heben sie sich gegenseitig auf.

Das einzige , was mich zu Set unterstützte margin:0pxauf dem obersten <div class="row">in meinem HTML - DOM.

Dies war wiederum nicht der attraktivste Weg, um das Problem zu lösen, aber da es nur an einer Stelle ist, habe ich es inline gestellt.

Zu Ihrer Information, die Container-Fluid- und offensichtlichen Bootstrap-Korrekturen führten nur zu einem erhöhten Leerzeichen auf beiden Seiten der sichtbaren Seite ... :( Obwohl ich auf meine Lösung gestoßen bin, indem ich das Github-Problem hin und her durchgelesen habe - es lohnt sich also zu lesen.

Zusammenfassung der wichtigsten Kommentare in einer Antwort:

• Dies ist ein bekannter Fehler
• Es gibt Problemumgehungen, die Sie jedoch möglicherweise nicht benötigen (lesen Sie weiter).
• Es passiert, wenn Elemente direkt im Körper platziert werden und nicht in einem Behälter-Flüssigkeits- Div oder einem anderen, der Div enthält. Sie direkt im Körper zu platzieren, ist genau das, was die meisten Menschen tun, wenn sie Dinge vor Ort testen. Sobald Sie Ihren Code auf der vollständigen Seite platziert haben (also in einer Containerflüssigkeit oder einem anderen Container-Div), werden Sie nicht auf dieses Problem stoßen (Sie müssen nichts ändern).