3 Elemente, die beide rechts sollten nach oben und unten in Twitter-Bootstrap

Ich möchte eine Test-Website bauen. Es enthält 3 Divs. Ein div sollte auf der linken Seite sein und die anderen divs auf der rechten Seite. Wenn ich die Größe des Browsers ändere, sollte sich der höchste der rechten Divs nach oben und der niedrigste nach unten bewegen.3 Elemente, die beide rechts sollten nach oben und unten in Twitter-Bootstrap

Dies ist, wie es in großen Browsern aussehen sollte:

<div class="col-lg-6 highlight" style="height:50%;">1</div> 
<div class="col-lg-6 highlight" style="height:25%;">2</div> 
<div class="col-lg-6 highlight" style="height:25%;">3</div>

Aber wenn ich den Browser die Größe, die um 1 - 2 - 3 I 2 wollen - 1 - 3.

So sollte es aussehen. Dieser Code funktioniert in Mobile:

<div class="col-lg-6 highlight col-lg-push-6" style="height:25%;">2</div> 
<div class="col-lg-6 highlight col-lg-pull-6" style="height:50%;">1</div> 
<div class="col-lg-6 highlight col-lg-push-6" style="height:25%;">3</div>

Aber wenn ich die Browser-Fenster zu groß der Größe kommt es eine Lücke.

Es funktioniert, wenn ich die 1 nach links und die anderen nach rechts und entfernen Sie die CSS-Eigenschaften in großen Browsern schweben. Aber ist es mit reinem Bootstrap möglich?

Quelle

2016-08-03 Ef Ge

Sie können Pull-Right- und Pull-Left-Klassen für Float links oder rechts verwenden.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <style> 
 
    @media(max-width: 991px) { 
 
     .pull-right, 
 
     .pull-left { 
 
     float: none!important; 
 
     } 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="row" style="height:500px;"> 
 
    <div class="col-md-6 pull-right" style="height:25%;background:#080;color:#fff;text-align:center;">2</div> 
 
    <div class="col-md-6 pull-left" style="height:50%;background:#080;color:#fff;text-align:center;">1</div> 
 
    <div class="col-md-6 pull-right" style="height:25%;background:#080;color:#fff;text-align:center;">3</div> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2016-08-03 10:29:29

3 Elemente, die beide rechts sollten nach oben und unten in Twitter-Bootstrap

Antwort

Verwandte Themen