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

回答

相关问题