Heim  >  Artikel  >  Web-Frontend  >  Wie kann verhindert werden, dass sich Spalten stapeln, wenn ein fester Wrapper mit dem Grid-System von Bootstrap verwendet wird?

Wie kann verhindert werden, dass sich Spalten stapeln, wenn ein fester Wrapper mit dem Grid-System von Bootstrap verwendet wird?

Patricia Arquette
Patricia ArquetteOriginal
2024-11-03 06:25:30504Durchsuche

How to Prevent Columns from Stacking When Using a Fixed Wrapper with Bootstrap's Grid System?

Bootstrap-Rastersystem kombiniert mit festem Wrapper – verhindert Spaltenstapelung

Problem:

Verwendung des Bootstrap-3-Rastersystems kombiniert Wann Der Wrapper ist fest, die Spalten werden gestapelt, wenn sich die Größe des Browserfensters ändert, auch wenn der Wrapper die gleiche Größe behält.

Antwort:

Spalten wie sm, md, lg in Bootstrap werden reaktionsschnell umbrochen/gestapelt. Um nicht gestapelte Spalten zu verwenden, können Sie die col-xs-*-Klassen verwenden.

<code class="html"><div class="container">
  <div class="row">
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">.col-4</div>
  </div>
</div></code>

Demo: http://bootply.com/80085

Hinweis: In Bootstrap 4 ist dies nicht mehr erforderlich Geben Sie xs an.

<code class="html"><div class="container-fluid">
  <div class="row">
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
  </div>
</div></code>

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass sich Spalten stapeln, wenn ein fester Wrapper mit dem Grid-System von Bootstrap verwendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn