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

68

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

html  twitter-bootstrap  twitter-bootstrap-3 
— vee
quelle
Die Bildlaufleiste scheint ein Nebeneffekt von bootply zu sein. Bei Verwendung von cssdeck und meiner eigenen Website wird keine Bildlaufleiste angezeigt. Sie können auf das Symbol "Monitor" klicken und sehen, dass im Popup keine Bildlaufleiste vorhanden ist.
— Kevin Bowersox
1
— ta.speot.is
3
Die Bildlaufleiste wirkt sich nicht auf das Bootplay aus. es erscheint sogar auf meinem localhost. und auf dem cssdeck gibt es keinen bootstrap 3, es hat nur bootstrap 2
— vee

Antworten:

57

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;
}
— Cyril N.
quelle
1
Oder fügen Sie Ihrem Container div (wo .row platziert ist) Folgendes hinzu, wie @davidpauljunior vorgeschlagen hat: padding: 0 15px; Rand links: 0px; Rand rechts: 0px;
— Jorre
Wenn Sie den .rowRand links und rechts auf "0" setzen, wird die Kante von div unscharf. Also benutze body { overflow-x: hidden; }und passe ich das besser an padding.
— Charlie
11

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."

— Zim
quelle
1
Das Problem wurde erneut geöffnet.
— Ra ist tot
11
Bis dies behoben ist, müssen Sie nur Ihren eigenen <div class="container-fluid">(oder einen beliebigen Namen) hinzufügen und diesen geben margin-left: 15px; margin-right: 15px;, um den negativen Rand des row.
— Davidpauljunior
5
padding: 0 15px;ist die Anleitung in den Bootstrap-Dokumenten: getbootstrap.com/css/#grid-intro
— Zim
Die Anleitung in den Dokumenten funktioniert nicht, aber der Vorschlag von Davidpauljunior!
— Jorre
8

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.

— Beau
quelle
8

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.

— Tamik Soziev
quelle
5

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

body > .row {
    margin-left: 0px;
    margin-right: 0px;
}
— MK
quelle
Die Ränder werden bereitgestellt, um die Auffüllung für .col- * -Klassen aufzuheben. Durch Hinzufügen dieses Snippets werden die Ränder zurückgesetzt. Wenn Sie die Ränder noch einmal entfernen möchten, können Sie Folgendes hinzufügen: .container-full .row> * {padding: 0px; }
— Ian Jennings
3

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!

— Sieger
quelle
2

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/

— TechnoBlahble
quelle
2
Ja, ich weiß, dass es bereits flüssig ist, aber es hat eine horizontale Bildlaufleiste, die nicht richtig ist.
— Vee
Ja, die horizontale Bildlaufleiste wird angezeigt.
— Ata S.
2

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

.row {
    width:99.99%;
}
— CodingYourLife
quelle
2

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.

— Cssyphus
quelle
1

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>
— Bo.
quelle
1

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.

— Bojan
quelle
1

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;
}
— Yavanosta
quelle
1

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>
— ShadeTreeDeveloper
quelle
1

Auf den Körper auftragen scheint die horizontale Bildlaufleiste loszuwerden

overflow-x: hidden;
— Dinglestein
quelle
1

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

.container{
    overflow: hidden;
    overflow-y: auto;
}
— ZeJur
quelle
0

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.

— Bart Calixto
quelle
Ja, ich weiß, dass es bereits flüssig ist, aber es hat eine horizontale Bildlaufleiste, die nicht richtig ist.
— Vee
horizontale Scroller? Ihr Code sieht schlecht aus. poste eine Geige, wenn du kannst und wir werden dir helfen können. Platzieren Sie Ihren Hauptcode in einem Container?
— Bart Calixto
und was ist schlecht Alles ist richtig wie im Dokument beschrieben. Fügen Sie diese HTML-Datei einfach in die HTML-Datei ein, einschließlich Bootstrap 3-CSS. Es sollte ein ganzseitiges Rasterlayout anzeigen. nur das.
— Vee
Ich sehe den horizontalen Scroller nicht.
— Bart Calixto
0

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>
— Sudharshan
quelle
0

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.

— Mladen Danic
quelle
0

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.

— David
quelle
0

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).
— jj_
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.