bootstrap嵌套列在短格

Question

我是相當新的引導，我想在附加圖像中實現這樣的事情，但我不能讓文本區域3 & 4顯示。

這裏是我的代碼 歡迎任何建議。我找網格系統過於 這裏的一個很好的教程是鏈接到圖像

<div class="container-fluid"> 
    <div class="jumbotron"> 
     <center> 
      <h1>Bootstrap Tutorial</h1> 

      <p> 
       Bootstrap is the most popular HTML, CSS, and JS framework for developing 
       responsive, mobile-first projects on the web. 
      </p> 

      <input type="button" class="btn btn-info" value="Order service "> 

     </center> 

    </div> 
</div> 


<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-lg-8 col-md-8 col-sm-8" > 


      <!-- first row 8 div--> 
      <div class="short-div"> 
       <div class="well well-sm"> 
        Bootstrap is the most popular HTML, CSS, and JS framework for developing 
        responsive, mobile-first projects on the web. Bootstrap is the most popular HTML, CSS, and JS framework for developing 
        responsive, mobile-first projects on the web. 
       </div> 
      </div> 

      <!-- second row 8 div--> 
      <div class="short-div"> 
       <div class="well well-sm"> 
        Bootstrap is the most popular HTML, CSS, and JS framework for developing 
        responsive, mobile-first projects on the web. Bootstrap is the most popular HTML, CSS, and JS framework for developing 
        responsive, mobile-first projects on the web. 
       </div> 
      </div> 


       <!-- third row 8 div--> 
      <div class="short-div"> 

       <!--left 4 div--> 
       <div class="col-md-4 col-sm-4" style="background-color:forestgreen"> 

       </div> 

       <!--right 4 div--> 
       <div class="col-md-4 col-sm-4" style="background-color:blue"> 

       </div> 

      </div> 
       </div> 
     </div> 
    </div> 
</div> 

Answer 1

請記住，當你要細分成一排，你需要計算的寬度對於父元素而不是正文的12個網格系統。

使用col-md-6而不是col-md-4，因爲它會將父元素劃分爲列而不是三個。

您所需的佈局是在下面的代碼：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="jumbotron"> 
 
    <center> 
 
     <h1>Bootstrap Tutorial</h1> 
 

 
     <p> 
 
     Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. 
 
     </p> 
 

 
     <input type="button" class="btn btn-info" value="Order service "> 
 

 
    </center> 
 

 
    </div> 
 
</div> 
 

 

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-lg-8 col-md-8 col-sm-8"> 
 

 

 
     <!-- first row 8 div--> 
 
     <div class="short-div"> 
 
     <div class="well well-sm"> 
 
      Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. 
 
     </div> 
 
     </div> 
 

 
     <!-- second row 8 div--> 
 
     <div class="short-div"> 
 
     <div class="well well-sm"> 
 
      Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. 
 
     </div> 
 
     </div> 
 

 

 
     <!-- third row 8 div--> 
 
     <div class="short-div"> 
 

 
     <!--left 4 div--> 
 
     <div class="col-xs-6 col-md-6 col-sm-6 well"> 
 
      Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. 
 
     </div> 
 

 
     <!--right 4 div--> 
 
     <div class="col-xs-6 col-md-6 col-sm-6 well"> 
 
      Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. 
 
     </div> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>