Как выровнять divs и rows с bootstrap

Question

У меня проблемы с выравниванием вложенных строк. См. Рисунок ниже. У меня есть 1 строка как 9 и 3 строки как 3. 9 + 3 = 12 на экране md и lg. В экране sm я хотел бы иметь строку один как 12 и 3 других строки под ней (4 + 4 + 4).

https://s28.postimg.org/f0xa2380t/helpbootstrap.png

<div class="container">   
<div class="row"> 
    <div class="col-md-9 col-sm-12"> 
    <div class="row "> 
     <div class="col-md-12 large"> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-3 col-sm-12"> 
    <div class="row "> 
     <div class="col-md-12 col-sm-4 small"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12 col-sm-4 small"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12 col-sm-4 small"> 
     </div> 
    </div>   
    </div> 
</div> 

.small{ height:100px; border: 1px solid;} .large{ height:200px; border: 1px solid; } 

https://jsfiddle.net/proabid/qLg72vns/

Answer 1

Вам просто нужно избавиться от строк в вашей второй DIV:

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-9 col-sm-12"> 
 
     <div class="row "> 
 
     <div class="col-md-12 large"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-3 col-sm-12"> 
 
     <div class="row"> 
 
     <div class="col-md-12 col-sm-4 small"> 
 
     </div> 
 
     <div class="col-md-12 col-sm-4 small"> 
 
     </div> 
 
     <div class="col-md-12 col-sm-4 small"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Example bootply

Answer 2

Это работает с использованием Boostrap v4

<div class="container"> 
<div class="row"> 
    <div class="col-md-9 col-sm-12 large"> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit qui  exercitationem placeat doloribus aut id recusandae pariatur. Illum, porro aut ullam? Adipisci tempora fugiat quam quos dolorem, blanditiis dicta magni. 
    </p> 
    </div> 
    <div class="col-md-3 col-sm-3 col-xs-4 small"> 
    <p> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit qui exercitationem placeat doloribus aut id recusandae pariatur. Illum, porro aut ullam? Adipisci tempora fugiat quam quos dolorem, blanditiis dicta magni. 
    </p> 
    </div> 
    <div class="col-md-3 offset-md-9 col-sm-3 col-xs-4 small"> 
    <p> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedi qui exercitationem placeat doloribus aut id recusandae pariatur. Illum, porro aut ullam? Adipisci tempora fugiat quam quos dolorem, blanditiis dicta magni. 
    </p> 
    </div> 
    <div class="col-md-3 offset-md-9 col-sm-3 col-xs-4 small"> 
    <p> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit qui exercitationem placeat doloribus aut id recusandae pariatur. Illum, porro aut ullam? Adipisci tempora fugiat quam quos dolorem, blanditiis dicta magni. 
    </p> 
    </div> 
</div> 

JSFIDDLE

https://jsfiddle.net/qLg72vns/8/

Answer 3

@Procode Пожалуйста, проверьте следующий код остроумие ч пример текста:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
\t \t \t <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12"> 
 
      \t <p>ABCD</p> 
 
      </div> 
 
      <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> 
 
      \t <div class="col-lg-12 col-md-12 col-sm-4 col-xs-4"> 
 
      \t \t <p>ABCD</p> 
 
       </div> 
 
       <div class="col-lg-12 col-md-12 col-sm-4 col-xs-4"> 
 
      \t \t <p>ABCD</p> 
 
       </div> 
 
       <div class="col-lg-12 col-md-12 col-sm-4 col-xs-4"> 
 
      \t \t <p>ABCD</p> 
 
       </div> 
 
      </div> 
 
</div>

Answer 4

Удаление лишних строк сделал решить мою проблему.