bootstrap вложенные столбцы в short-div

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>