Bootstrap-Gitter in unterschiedliche Anzahl von Spalten ohne Code-Duplikationen umwandeln

Question

Ich habe ein Problem mit der dynamischen Anordnung meiner Div-Boxen.

Ich brauche zwei Version:

Mobil (eine Spalte untereinander):

<div>A</div> 
<div>B</div> 
<div>C</div> 

Jede andere (die mittlere gleitet zwischen den beiden anderen):

<div class="col-lg-4"> 
<div>A</div> 
<div>C</div> 
</div> 
<div class="col-lg-8"> 
<div>B</div> 
</div> 

Ich kann das mit Code-Duplikaten und sichtbaren/versteckten Paaren verwalten, aber gibt es eine Lösung ohne diese? Vor allem möchte ich nicht Code Vervielfältigungen ...

Danke,

edit:

unglücklicherweise, ich vergaß es eine weitere Komplikation hinzuzufügen ist:

Ich brauche mehrere 100% Breite Elemente unter Diese ganze ABC-Sache und die Höhe des B-Elements ändert sich ...

Diese Konfiguration zeigt, dass sich D und B überlappen. Ich möchte die D unter der Position B ...:

<div class="container"> 
    <div class="row parent-row"> 
    <div class="col-lg-4 div-wrap"> 
    <div class="a">A</div> 
    <div class="b">B<br>B<br>B<br>B<br>B</div> 
    <div class="c">C</div> 
    <div class="d">DDDDDDDDDDD DDDDDDDDD DDDDDDDDDDDDDDDDD DDDDD DDDDDDDDDDDDDDDDDD DDDDDDDDDDDDD DDDDDDDD DDDDDDDDDDDDDD</div> 
    </div> 
</div> 
</div> 

@media (min-width: 1200px) { 
    .b{ 
    position:absolute; 
    top: 0; 
    right:0; 
    width: 66.66666667%; 
    padding-right: 15px; 
    padding-left: 15px; 
    min-height:1px; 
    } 

    .d{ 
    position:absolute; 
    right:0; 
    width:100%; 
    padding-right: 15px; 
    padding-left: 15px; 
    min-height:1px; 
    } 


    .div-wrap{ 
    position:initial; 
    clear:both; 
    } 

    .parent-row{ 
    position:relative; 
    clear:both; 
    } 
} 

Answer 1

sehen, ob dies den Trick für Sie tun: http://codepen.io/panchroma/pen/xRqgJe

Das wichtige Bit ist, dass, wenn das Ansichtsfenster breiter als das gestapelte Mobil Ansicht verwenden Sie eine Medienabfrage, um div 'B' aus dem normalen Ablauf herauszunehmen, indem Sie 'position: absolute' anwenden. Und gleichzeitig wenden Sie den Bootstrap-CSS-Stil für ein div-Element "col-lg-8" manuell an. Außerdem können Sie die Position der übergeordneten Elemente (.div-wrap und .parent-row) so anpassen, dass Korrekte Position.

Viel Glück

HTML

<div class="container"> 
    <div class="row parent-row"> 
    <div class="col-lg-4 div-wrap"> 
    <div class="a">A</div> 
    <div class="b">B</div> 
    <div class="c">C</div> 
    </div>  
    </div> 
</div> 

CSS

@media (min-width: 1200px) { 
    .b{ 
    position:absolute; 
    top: 0; 
    right:0; 
    width: 66.66666667%; 
    padding-right: 15px; 
    padding-left: 15px; 
    min-height:1px; 
    } 

    .div-wrap{ 
    position:initial; 
    } 

    .parent-row{ 
    position:relative; 
    } 

} 

Answer 2

Sie brauchen keine absolute Position zu verwenden. Wenden Sie stattdessen die Eigenschaften float: right; und clear: left; an.

ich getestet habe zwei Situationen:

1. Block A höher als B
2. Block B ist höher als ein

Bitte überprüfen Sie das Ergebnis: http://codepen.io/glebkema/pen/dOezEz

/* Heart of the matter */ 
 
@media (min-width: 1200px) { 
 
    .clear-lg-left { 
 
    clear: left; 
 
    } 
 
    .pull-lg-right { 
 
    float: right !important; 
 
    } 
 
} 
 

 
/* Tests */ 
 
.tests { 
 
    margin-top: 14px; 
 
} 
 
.tests > div { 
 
    font-size: 28px; 
 
    font-weight: bold; 
 
    color: #fff; 
 
    padding-top: 6px; 
 
} 
 
.tests > div:nth-of-type(1) { background: #9c6; min-height: 120px; } 
 
.tests > div:nth-of-type(2) { background: #f93; min-height: 80px; } 
 
.tests > div:nth-of-type(3) { background: #69c; min-height: 80px; } 
 
.test-2 > div:nth-of-type(2) { background: #f93; min-height: 160px; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="row tests"> 
 
    <div class="col-lg-4">A</div> 
 
    <div class="col-lg-8 pull-lg-right">B</div> 
 
    <div class="col-lg-4 clear-lg-left">C</div> 
 
    </div> 
 
    <div class="row tests test-2"> 
 
    <div class="col-lg-4">A</div> 
 
    <div class="col-lg-8 pull-lg-right">B</div> 
 
    <div class="col-lg-4 clear-lg-left">C</div> 
 
    </div> 
 
</div>