Bootstrap 4 Spalten, die nicht wie erwartet angepasst werden

Ich habe ein 4-Spalten-Bootstrap-Responsive-Grid.Bootstrap 4 Spalten, die nicht wie erwartet angepasst werden

xs funktioniert gut, col-xs-12, da die 4 Spalten zu 4 einzelnen Zeilen geändert werden. lg funktioniert gut, col-lg-3, 4 Spalten auf der Seite, jeweils 1/4 der Seite.

Wenn ich anfange, die Größe der Seite für MD und SM zu reduzieren, habe ich mein Problem.

wenn ich md schlug ich hoffte, zwei Reihen mit 2 Spalten zu erhalten, Col-MD-6. Bei der ersten ansprechenden Layoutänderung, wenn ich die Größe des Fensters reduziere, erhalte ich Spalten 1 und 2 in der ersten Zeile wie erwartet, Spalte 3 ist wie erwartet in einer neuen zweiten Zeile in der ersten Spalte, aber die vierte Spalte ist in a neue 3. Reihe in der ersten Spalte.

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> 
     <p>Some Text</p> 
    </div> 
    <div class="clearfix visible-xs-block"></div> 
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> 
     <p>Some Text</p> 
    </div> 
    <div class="clearfix visible-xs-block visible-sm-block visible-md-block"></div> 
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> 
     <p>Some text</p> 
    </div> 
    <div class="clearfix visible-xs-block visible-sm-block visible-md-block"></div> 
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> 
     <p>Some text</p>    
    </div> 
</div>

Alle Hilfe wird am meisten geschätzt.

Quelle

2016-09-28 Ken

Warum haben Sie so viele Clearfixes? Entfernen Sie sie und Ihr Layout wird gut aussehen. –

@Rachel S, um klar zu sein, wollte ich nur die Clearfix-Klasse aus den 3 Divs, wo es definiert wurde entfernen oder auch die sichtbaren Klassen * * -Block entfernen. Ich habe nur den Clearfix entfernt und immer noch nicht wie erwartet in der md-Größe, etwa 900px -> 1100px. Bei dieser Größe wurden die Spalten 1 und 2 wie erwartet angezeigt, Spalte 3 war in Zeile 2, aber in der zweiten Spalte nicht in der ersten und die vierte Spalte in Zeile 3, Spalte 1. – Ken

okay, Problem nach Versuch und Irrtum behoben, aber ich denke ich jetzt habe ein besseres Verständnis der Clearfix- und visible - * - block-Klassen. Ich entfernte alle Clearfix- und visible - * - block-Klassen und fügte dann einen Clearfix und einen sichtbaren md-Block vor der dritten Spalte hinzu. Dies wird jetzt bei allen Größen wie erwartet angezeigt. Danke für die Richtung, um das zu lösen. – Ken

haben Sie für die erste Spalte und für die restlichen Spalten verwendet.

Verwenden Sie nur für alle Spalten, die das Problem lösen.

Block wird volle Breite für Div verwenden also wenn Sie Block für SM oder MD verwenden, wird es die Reaktionsfähigkeit verlieren.

Quelle

2016-09-28 12:27:38

Ich habe alle Clearfix- und Block-Klassen entfernt und versucht, nur wo erforderlich hinzuzufügen. Ich habe immer noch nur Probleme auf md-Ebene. Das Hinzufügen von visible-md-Block vor dem 3., nur 4., 3. und 4., gibt mir immer noch die 3 Zeilen, wie in meinem Kommentar oben beschrieben. – Ken

visible-md-block verwendet immer noch die volle Breite. Sie müssen vermeiden, Block für alle Zeilen zu verwenden. –

Bootstrap 4 Spalten, die nicht wie erwartet angepasst werden

Antwort

Verwandte Themen