Bootstrap 3 - кнопка, текст, кнопки с поплавком

Question

Я пытаюсь сделать такой макет:

Как я могу достичь его с помощью Bootstrap 3?

Пытались следующий код, но он не работает:

<div class="container"> 
    <div class="well"> 
     <div class="col-md-3 text-center"><button class="btn btn-default">Previous</button></div> 
     <div class="col-md-6 text-center">title</div> 
     <div class="col-md-3 text-center"><button class="btn btn-default">Next</button></div> 
    </div> 
</div> 

Answer 1

вы должны использовать класс .pull-right и .pull-left с вашим кодом, и в качестве примера:

<button class="btn btn-default pull-left">Previous</button> 
<button class="btn btn-default pull-right">Next</button> 

надежды это дает вы идете и работаете на вас.

Answer 2

Он должен работать, если обернуть COLS внутри row ..

<div class="container"> 
    <div class="well"> 
    <div class="row"> 
     <div class="col-md-3 text-center"><button class="btn btn-default">Previous</button></div> 
     <div class="col-md-6 text-center">title</div> 
     <div class="col-md-3 text-center"><button class="btn btn-default">Next</button></div> 
    </div> 
    </div> 
</div> 

Demohttp://bootply.com/105224

Answer 3

Bootstrap включает в себя адаптивный, мобильную первую подвесную систему жидкости, надлежащим образом масштабируется до 12 столбцов, размер устройства или вида просмотра увеличивается. Для быстрого создания сетчатых макетов доступны готовые классы сетки, такие как .row и .col-md-4.

<div class="titleBar"> 
    <div class="row"> 
     <div class="col-md-3"><button class="btn btn-primary">Button 1</button></div> 
     <div class="col-md-6 text-center">Title Text</div> 
     <div class="col-md-3 "><button class="btn btn-primary">Button 2</button></div> 
    </div> 
    </div> 

Надеется, что это будет helpful.Also проверить это http://getbootstrap.com/css/#grid для получения более подробной информации о отзывчивым макете сетки.