Question

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

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

我试过以下但没有运气：

添加display: inline - 栏未显示
添加float: right - 栏未显示
使用表格实现布局 - 栏内未显示<td>

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

Answer 1

您可以按以下方式应用Grid system：

<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>

Try it your self。请注意，col-sm-*类应放在row类中。

Answer 2

为什么inline？我已使用指定的inline-block尝试了width并且工作正常：http://www.bootply.com/LsNz4F87Np

如何内联Bootstrap 3进度条？

2 个答案: