如何放置一個容器（兩行）與兩個容器（兩個不同的行）在自舉？

如何將兩個容器（兩行不同）的容器（兩行）放在引導程序中？ enter image description here 如何放置一個容器（兩行）與兩個容器（兩個不同的行）在自舉？

我要安排這樣的

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/），因此我們可以嘗試解決您的問題並解釋原因你自己的嘗試失敗了 - 這樣你就可以學到一些對你未來發展有用的東西，併爲這個單一問題找到答案。 – 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

您可以使用網格做這類事情的容器。你能說明它應該是什麼樣子？（我可以幫你更多）

編輯：爲此，你實際上只需要一行兩列。

它看起來就像這樣：

<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

看一下附件圖片 –

好吧，我明白了，我會編輯我的答案... –

你沒有得到，我想問什麼 –

如何放置一個容器（兩行）與兩個容器（兩個不同的行）在自舉？

回答

相關問題