Bootstrap: Get Row-span-ähnliches Verhalten?

Ich habe ein Raster-Layout, wo ich ein Menü auf der rechten Seite im Desktop-Modus, aber oben auf dem Handy wollen. Dies funktioniert wie folgt aus:Bootstrap: Get Row-span-ähnliches Verhalten?

<div class="row"> 
     <div class="col-sm-4 col-md-push-8"><div id="menu"></div><div id="side-content"></div></div> 
     <div class="col-sm-8 col-md-pull-4"><div id="main-content"></div></div> 
    </div>

Aber, ich möchte andere Inhalte hinzufügen, direkt unter dem Menü auf der rechten Seite im Desktop-Modus und haben es unter dem Haupt Inhalte auf mobilen bewegen.

Mit anderen Worten, würde ich es gerne wie am Ende der Suche, was diese auf mobilen tun würde:

<div class="row"> 
     <div class="col-xs-12"><div id="menu"></div></div> 
     <div class="col-xs-12"><div id="main-content"></div></div> 
     <div class="col-xs-12"><div id="side-content"></div></div> 
    </div>

Gibt es eine Möglichkeit, es so zu machen, habe ich zwei Zellen auf der rechten Seite in Desktop haben könnte Modus, aber haben Sie einen Fluss über den Hauptinhalt, während der andere unter dem Hauptinhalt auf dem Handy fließt?

Edit: Hier ist ein Bild von dem, was ich meine

Quelle

2017-02-02 Mike

Gehen Sie mit dem Link oder unter Code es work-- auch sein kann, kann Ihnen helfen -

JSFiddle

HTML-Code -

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-12 col-sm-4 menuDiv"> 
     <div id="menu"> 
     <h1>menu</h1></div> 
    </div> 
    <div class="col-xs-12 col-sm-8"> 
     <div id="main-content"> 
     <h1>main</h1></div> 
    </div> 
    <div class="col-xs-12 col-sm-4 sideDiv"> 
     <div id="side-content"> 
     <h1>side</h1></div> 
    </div> 
    </div> 
</div>

CSS-Code -

#menu{ 
    background-color:#60E877; 
} 

#main-content{ 
    background-color:#E86060; 
} 

#side-content{ 
    background-color:#685818; 
} 

@media(min-width:768px){ 
    .menuDiv, .sideDiv{ 
    float:right; 
    } 
}

Quelle

2017-02-02 07:08:58

Danke - das funktioniert! Das einzige, was mir aufgefallen ist, ist, dass das Layout fehlschlägt, wenn der Hauptinhalt kürzer ist als das Menü, weil dann "Seite" gegen das Menü unter "Haupt" stapelt. Aber ich denke, dass ich damit irgendwie umgehen kann. – Mike

Mein Vergnügen, dass mein Code Ihnen hilft. @Mike –

dieses Versuchen wird es

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      
 
    </head> 
 

 
    <body> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-sm-4 col-sm-push-8 col-md-4 col-md-push-8 col-lg-4 col-lg-push-8" style="background-color: blue;"><div id="menu"><h1>menu</h1></div></div> 
 
     <div class="col-sm-pull-8 col-md-pull-8 col-lg-pull-8"><div id="main-content" style="background-color: red;"><h1>main</h1></div></div> 
 
     <div class="col-sm-4 col-sm-push-8 col-md-4 col-md-push-8 col-lg-4 col-lg-push-8" style="background-color: green;"> 
 
     <div id="side-content"><h1>side</h1></div></div> 
 
     
 
     
 
     
 
     </div> 
 
    </div> 
 

 
</body> 
 
    </html>

Quelle

2017-02-02 04:57:22 neophyte

Danke - aber nicht diese immer den Seiteninhalt auf dem Boden unterhalb des Hauptinhalt? Ich möchte, dass die Seite direkt unter dem Menü auf dem Handy angezeigt wird. Also, die rechte Seite sollte Menü dann Seite auf Handy haben. – Mike

nicht bekommen, wie Sie Ihre Seite aussehen soll ... bitte versuchen Sie ein Bild hinzuzufügen. – neophyte

Danke - Ich habe ein Bild hinzugefügt ... – Mike

Bootstrap: Get Row-span-ähnliches Verhalten?

Antwort

Verwandte Themen