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>

演示 http://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>

希望这会有所帮助。另请查看此http://getbootstrap.com/css/#grid以获取有关响应式网格布局的更多详细信息。