logo标签列表

如何将Bootstrap 3进度条内联？

htmlcsstwitter-bootstrap
6

我希望能够将某些内联元素放在 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
一些内联元素使用浮动左对齐怎么样？ - Vinz243
只需制作自己的进度条。即使将一个浮动到左侧，另一个浮动到右侧，它们仍然会出现在彼此上方。 - I wrestled a bear once.
2个回答
7
您可以如下应用栅格系统：
<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 类中。

哦天啊，原来如此简单。我不知道为什么我甚至没有尝试过网格系统，这是Bootstrap的方式。 - empz
3
1
太棒了！我需要在同一行内显示多个进度条。 - Chloe
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接