2017-02-11 7 views
0

Wie platziere ich einen Container (zwei Zeilen) mit zwei Containern (in zwei verschiedenen Reihen) im Bootstrap? enter image description hereWie platziere ich einen Container (zwei Zeilen) mit zwei Containern (in zwei verschiedenen Reihen) im Bootstrap?

mag ich wie diese angeordneten Behälter

+2

Willkommen bei StackOverflow! Bitte geben Sie ein [minimales, vollständiges und überprüfbares Beispiel] (http://stackoverflow.com/help/mcve) für Ihren Versuch an, z. als [Stack Snippet] (https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/), damit wir versuchen können, Ihr Problem zu lösen und zu erklären, warum Ihr eigener Versuch ist gescheitert - so können Sie etwas Nützliches für Ihre zukünftige Entwicklung lernen und eine Antwort auf dieses einzelne Problem bekommen. – andreas

+0

ein Beispielbild angebracht –

+0

i-Container wie diese –

Antwort

0

Verwenden Dieser Code:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <script src="js/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <style type="text/css"> 
     .gray{border:5px solid gray; 
     height: 100px; 


     } 
     .green{border: 5px solid green; 
     height: 300px; 
    } 

     .orange{ 
      border: 5px solid orange; 
      height: 350px; 

     } 

     .greenplus{border: 5px solid green; 
     height: 50px; 
     } 
    </style> 
    <body> 
     <div class="container" style="margin-top: 50px;"> 
     <div class="row" > 
      <div class="col-lg-8 col-sm-8 col-md-8"> 
      <div class="row" style="padding-left: 20px; padding-right: 20px;"> 
       <div class="gray"></div> 
      <br> 
       <div class="green"></div> 
      </div> 
      </div> 
      <div class="col-lg-4 col-sm-4 col-md-4"> 
      <div class="row" style="padding-left: 20px; padding-right: 20px;"> 
       <div class="orange"></div> 
       <br> 
       <div class="greenplus"></div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </body> 
</html> 
1

Sie Gitter verwenden können, diese Art von Dingen zu tun. Kannst du illustrieren, wie es aussehen soll? (Ich könnte dir dann mehr helfen)

EDIT: Dafür brauchst du eigentlich nur eine Zeile mit zwei Spalten.

Und es wird wie folgt aussehen:

<div class="row"> 

     <div class="col-md-8"> <!-- 8 is the width of the left side --> 

     You content here 

     </div> 

    <div class="col-md-4"> <!-- 4 is the width of the right side --> 

     Your content here 

     </div> 

    </div> 

Wenn Sie benötigen, so dass der Inhalt innerhalb dieser Spalten auch ein Gitter ist, dann wird es ein bisschen anders sein:

<div class="row"> 

     <div class="col-md-8"> <!-- 8 is the width of the left side --> 

     <div class="row"> 
      <div class="col-md-12"></div> 
      <!-- You just add your columns here --> 
     </div> 

     <div class="row"> 
      <div class="col-md-12"></div> 
      <!-- You just add your columns here --> 
     </div> 

     </div> 

    <div class="col-md-4"> <!-- 4 is the width of the right side --> 

     <div class="row"> 
      <div class="col-md-12"></div> 
      <!-- You just add your columns here --> 
     </div> 

     <div class="row"> 
      <div class="col-md-12"></div> 
      <!-- You just add your columns here --> 
     </div> 

     </div> 

    </div> 
+0

Blick auf den beigefügten Bild einmal angeordnet wollen –

+0

Okay, ich habe es, werde ich meine Antwort bearbeiten ... –

+0

Sie nicht bekommen, was ich –

Verwandte Themen