2つのコンテナ（2つの異なる行）を持つブートストラップ内にコンテナ（2行）を配置する方法は？

2つのコンテナ（2つの異なる行）を持つコンテナ（2行）をブートストラップに配置するにはどうすればよいですか？ enter image description here 2つのコンテナ（2つの異なる行）を持つブートストラップ内にコンテナ（2行）を配置する方法は？

は、私はあなたが物事のこれらの種類を行うには、グリッドを使用することができ、この

出典

2017-02-11 RISHABH BANSAL

ようこそStackOverflow！あなたの試みの[最小、完全で、かつ検証可能な例]（http://stackoverflow.com/help/mcve）を提供してください。 [Stack Snippet]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）として、問題を解決して理由を説明することができますあなた自身の試みは失敗しました。あなたの将来の発展に役立つ何かを学び、この1つの問題に対する答えを得ることができます。 – andreas

はあなたが私は –

を添付しますもっと説明してください。 –

使用をこのコード：

<!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>

出典

2017-02-15 12:10:48 KiranPurbey

ように配置されたコンテナをしたいです。あなたはどのように見えるでしょうか（もっと助けてください）

EDIT：実際には2列の行が必要です。

そしてそれは次のようになります。

<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>

これらの列の内のコンテンツは、グリッドであるように、あなたが必要な場合は、それは少し違うようになります。

<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>

出典

2017-02-11 09:39:25

見てのように配置されたコンテナが、私は私の答えを編集しますたいサンプル画像 –

たら、添付された画像では、この –

...私はさて、私はそれを得た –

2つのコンテナ（2つの異なる行）を持つブートストラップ内にコンテナ（2行）を配置する方法は？

答えて

関連する問題