如何内联Bootstrap 3进度条？

Question

我希望能够在Bootstrap 3进度条旁边放一些内联元素,如下所示:

Some inline element [progress bar]
Some inline element [progress bar]
Some inline element [progress bar]

我试过以下没有运气:

• 添加display: inline- 栏不显示
• 添加float: right- 栏不显示
• 使用表格来实现布局 - 栏内没有显示 <td>

这是我的尝试的bootply:http://www.bootply.com/9jNcnGRkUK

Answer 1

您可以按如下方式应用网格系统:

<div class="container">
  <div class="row"> 
    <h3>inline</h3>
    <span class="col-sm-3">Some inline element</span>
    <div class="progress" class="col-sm-9">
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
        <span class="sr-only">45% Complete</span>
      </div>
    </div>
  </div>  
</div>

试一试你自己.请注意, col-sm-*该类应放在row类中.