Stuck with columns with bootstrap

我幾天前開始學習bootstrap，現在我試圖建立自己的網站，但我堅持佈局。Stuck with columns with bootstrap

我想要得到的東西是這樣的：

但我是堅持了這一點：

這裏是我的代碼：

<!doctype html> 
<html lang="fr"> 
    <head> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
     <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
     <title>Title</title> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
     <link rel="stylesheet" href="styles.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
    </head> 
    <body> 
     <div class="container-fluid"> 
      <div class = "row"> 
       <div class="col-md-4 h-50" style="background:blue;"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lac</p> 
       </div> 
       <div class="col-md-8" style="background:red;"> 
        <p>         
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lacus. Aenean eu elit id tortor porttitor vehicula. Etiam ac risus pretium, lacinia nibh sed, posuere orci. Nam consequat orci sed pharetra condimentum. Morbi ultricies viverra lorem, ac pellentesque ante aliquet sed. Duis iaculis interdum quam vitae tincidunt. Suspendisse volutpat euismod varius.         
          Aliquam erat volutpat. Mauris imperdiet condimentum accumsan. Aliquam mollis turpis diam, et congue est imperdiet sed. Morbi sed tellus ut justo eleifend condimentum. Quisque dignissim cursus lectus. In a condimentum justo. Phasellus auctor quam at leo mollis faucibus. Integer rhoncus luctus accumsan.         
          In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut luctus luctus tortor, a dignissim ante luctus at. Nunc ac turpis ullamcorper, semper ipsum nec, tincidunt est. Donec nec fringilla dolor. Quisque sed neque semper, convallis massa a, sollicitudin dui. Donec id ipsum justo. Quisque a porttitor eros, eu ullamcorper purus. Maecenas euismod massa mattis dignissim tempus. Mauris non turpis magna. Nulla accumsan suscipit ipsum quis varius. Phasellus nec sapien fermentum, aliquet arcu sed, lobortis nunc.         
          Integer et nisl ut nisi venenatis rutrum in nec elit. Sed a sem vitae metus ultricies commodo. Praesent ultricies, diam id tempus consequat, justo lacus sodales metus, ac ornare dolor odio ut nisi. Proin in mi ornare, hendrerit nulla sed, porta metus. Curabitur ac quam posuere, tempus nunc a, varius libero. Quisque nec enim pharetra, pulvinar ligula et, vestibulum elit. Integer enim dui, laoreet sit amet aliquam vitae, viverra ut enim. Morbi in dignissim felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus lobortis nisl sit amet risus venenatis pellentesque. Donec ultricies aliquam purus, vitae venenatis mauris sagittis congue. Sed vehicula iaculis lacinia. Pellentesque maximus elit quis arcu imperdiet ornare. Donec nec nisl id velit laoreet tempus ac id nisl.         
          Phasellus pulvinar erat ac quam pellentesque pellentesque. Vestibulum nec porta dui. Curabitur nec ligula at nunc blandit tristique vitae ac elit. Phasellus finibus vulputate arcu eget malesuada. Nunc nec massa ullamcorper tellus ullamcorper vulputate. Vestibulum et vestibulum ante. Quisque vulputate sed lacus quis ornare. </p> 
       </div> 
      </div> 
      <div class="row"> 
        <div class="col-md-4 h-50" style="background:green;"> 
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lac</p> 
         </div> 
      </div> 
     </div> 
    </body> 
</html>

我該如何達到這個結果？我不要求直接的答案，但一些建議來幫助我。

謝謝你們。

來源

2017-08-27 Ali CHERIFI

<div class="row"> 
<div class="col-md-4"> 
    <div> Blue div</div> 
    <div> Green div</div> 
</div> 
<div class="col-md-8"> 
    <div> Red div</div> 
</div> 
</div>

這裏的邏輯是，你必須將你的容器分成兩列。第1列以4箇中等列作爲寬度，第2列佔8箇中等列。而且你需要將第一個列塊分成兩行。

來源

2017-08-27 11:52:13

哦，就這麼簡單！謝謝！ –

它解決了我的問題！我現在只是在紅色和綠色之間有一段距離，但是我會解決這個問題，讓你覺得你真棒！編輯：我通過放置行div而不是隻是div來修復它。 –

使一個單一的排類和扭曲的每一件事成，喜歡學習引導首先了解的網格系統，強烈那麼它很容易地創建佈局


 
     <title>Title</title> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
     <link rel="stylesheet" href="styles.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
    </head> 
 
    <body> 
 
     <div class="container"> 
 
      <div class = "row"> 
 
       <div class="col-md-4 col-sm-4 "> 
 
        <div style="background:blue;"> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lac</p> 
 
        </div> 
 
        <div style="background:green;"> 
 
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lac</p> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-8 col-sm-8" style="background:red;"> 
 
        <p> 
 

 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lacus. Aenean eu elit id tortor porttitor vehicula. Etiam ac risus pretium, lacinia nibh sed, posuere orci. Nam consequat orci sed pharetra condimentum. Morbi ultricies viverra lorem, ac pellentesque ante aliquet sed. Duis iaculis interdum quam vitae tincidunt. Suspendisse volutpat euismod varius. 
 

 
          Aliquam erat volutpat. Mauris imperdiet condimentum accumsan. Aliquam mollis turpis diam, et congue est imperdiet sed. Morbi sed tellus ut justo eleifend condimentum. Quisque dignissim cursus lectus. In a condimentum justo. Phasellus auctor quam at leo mollis faucibus. Integer rhoncus luctus accumsan. 
 

 
          In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut luctus luctus tortor, a dignissim ante luctus at. Nunc ac turpis ullamcorper, semper ipsum nec, tincidunt est. Donec nec fringilla dolor. Quisque sed neque semper, convallis massa a, sollicitudin dui. Donec id ipsum justo. Quisque a porttitor eros, eu ullamcorper purus. Maecenas euismod massa mattis dignissim tempus. Mauris non turpis magna. Nulla accumsan suscipit ipsum quis varius. Phasellus nec sapien fermentum, aliquet arcu sed, lobortis nunc. 
 

 
          Integer et nisl ut nisi venenatis rutrum in nec elit. Sed a sem vitae metus ultricies commodo. Praesent ultricies, diam id tempus consequat, justo lacus sodales metus, ac ornare dolor odio ut nisi. Proin in mi ornare, hendrerit nulla sed, porta metus. Curabitur ac quam posuere, tempus nunc a, varius libero. Quisque nec enim pharetra, pulvinar ligula et, vestibulum elit. Integer enim dui, laoreet sit amet aliquam vitae, viverra ut enim. Morbi in dignissim felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus lobortis nisl sit amet risus venenatis pellentesque. Donec ultricies aliquam purus, vitae venenatis mauris sagittis congue. Sed vehicula iaculis lacinia. Pellentesque maximus elit quis arcu imperdiet ornare. Donec nec nisl id velit laoreet tempus ac id nisl. 
 

 
          Phasellus pulvinar erat ac quam pellentesque pellentesque. Vestibulum nec porta dui. Curabitur nec ligula at nunc blandit tristique vitae ac elit. Phasellus finibus vulputate arcu eget malesuada. Nunc nec massa ullamcorper tellus ullamcorper vulputate. Vestibulum et vestibulum ante. Quisque vulputate sed lacus quis ornare. </p> 
 
       </div> 
 
      </div> 
 

 
     </div> 
 
    </body> 
 
</html>

來源

2017-08-27 12:06:27

Stuck with columns with bootstrap

回答

相關問題