Как использовать Bootstrap вложенной колонку сетки

Question

Я пытался достичь начальных загрузку вложенных DIV столбца, но это не реагирует, я хочу, чтобы достичь полностью адаптивной энергосистемы В Bootstrap

это то, что я хочу достичь в начальной загрузке системы сетки

Это мой HTML разметки

<div class="col-md-12 topSpace"> 
    <div class="col-md-3 text-center"></div> 
    <div class="col-md-6 text-center"> 
    </div> 
    <div class="col-md-3 text-center"> 
    </div> 
</div> 
<div class="md-col-6 col-centered"></div> 

это CSS разметка

.col-centered{ 
margin:0 auto; 
} 

.topSpace{ 
top:100px; 
} 

Answer 1

Это нижняя разметка html должна работать.

<div class="col-md-12"> 

    <div class="row"> 
    <div class="col-md-3"> 
     1 
    </div>  
    <div class="col-md-6"> 
     2 
    </div>  
    <div class="col-md-3"> 
     3 
    </div> 
    </div> 

    <div class="row"> 
    <div class="col-md-6 col-md-offset-3"> 
     4 
    </div> 
    </div> 

</div> 

Демо: http://bootply.com/SJ3EYuxOQM

Answer 2

Это одна также работает попробовать,

<form class="form-horizontal" role="form"> 
    <div class="form-group"> 
     <div class="col-md-3"> 
      DIV1 
     </div> 
     <div class="col-md-6"> 
      DIV2 
     </div> 
     <div class="col-md-3"> 
      DIV3 
     </div> 
    </div> 

    <div class="form-group"> 
     <div class="col-md-6 col-md-offset-3"> 
      DIV4 
     </div> 
    </div> 
</form> 

Answer 3

Другой альтернативой @ ответ Джона является

<div class="col-md-12"> 

    <div class="col-md-3"> 
    1 
    </div> 
    <div class="col-md-6"> 

    <div class="row">  
     <div class="col-md-12"> 
     2 
     </div> 
     <div class="col-md-12"> 
     4 
     </div> 
    </div> 

    </div> 
    <div class="col-md-3"> 
    3 
    </div> 

</div> 

Он отличается как элементы перечислены для меньшая ширина экрана:

• Для моего ответа: 1,2,4,3
• Для @ Джонсе ответ: 1,2,3,4