Bootstrap - 进度指示器

Question

我有一个使用Bootstrap 3的应用程序。我正在尝试制作一个响应式进度指示器。该指示器有三到五个步骤。每个步骤显示一个图标、步骤名称和步骤状态。在移动设备上，我想让它看起来像这样：

o  Step 1
|  completed monday
|
o  Step 2
|  in progress
|
o  Step 3
   to be done

当屏幕不是手机时，我想要以这种方式显示它：

        o----------------o---------------o
     Step 1            step 2          step 3
completed Monday     in progress     to be done

为了创建这个，我目前拥有以下代码，可以在这个bootply中看到。

<div class="row">
  <div class="col-xs-12">
    <ul class="list-unstyled"> 
      <li>
        <i class="fa fa-circle"></i>
        Step 1<br>
          <span class="text-muted">completed monday</span>
      </li>
      <li>
        <i class="fa fa-bullseye"></i>
        Step 2<br>
        <span class="text-muted">in progress</span>
      </li>
      <li>
        <i class="fa fa-circle-o"></i>
        <span class="text-muted">to be done</span>
      </li>
    </ul>
  </div>
</div>

我不确定如何在圆圈之间得到那条线。有没有使用Bootstrap或CSS的方法？如果有，怎么做？

谢谢！

- Some User

Answer 1

我在你的HTML代码中使用了基本的表格控件(水平)：

<div class="row">
  <div class="col-xs-12">
    <ul class="list-unstyled"> 
      <table>
        <tr>
          <td>
      <li>
        <i class="fa fa-circle"></i>
        <span>-----------------------------</span>
        <br>
        Step 1
        <br>
          <span class="text-muted">completed monday</span>
      </li>
          </td>
          <td>
      <li>
        <i class="fa fa-bullseye"></i>
        <span>-----------------------------</span>
        <br>
        Step 2<br>
        <span class="text-muted">in progress</span>
      </li>
          </td>
          <td>
      <li>
        <i class="fa fa-circle-o"></i><br>

        Step 3<br>
        <span class="text-muted">to be done</span>

      </li>
          </td>
         </tr> 
      </table>
    </ul>
  </div>
</div>

垂直版本：

CSS：

.vertical_line{height:150px; width:1px;background:#000; margin-left:5px;}

HTML：

<div class="row">
  <div class="col-xs-12">
    <ul class="list-unstyled"> 
      <li>
        <i class="fa fa-circle"></i>
        Step 1 &nbsp; -
          <span class="text-muted">completed monday</span>
        <div class="vertical_line"></div>
      </li>
      <li>
        <i class="fa fa-bullseye"></i>
        Step 2 &nbsp; -
        <span class="text-muted">in progress</span>
        <div class="vertical_line"></div>
      </li>
      <li>
        <i class="fa fa-circle-o"></i>
        <span class="text-muted">to be done</span>
      </li>
    </ul>
  </div>
</div>

您可以将水平版本更改为类似垂直版本的CSS。

- apollo

---

这个会垂直排列吗？此外，有没有办法使用实线而非虚线（------）呢？ - Some User

@ZachTempleton 这是设计为保持水平的。我没有意识到你想要垂直的。请使用实线 ASCII 代码 "—" 替换破折号代码。 - apollo

@ZachTempleton，你需要更具体地说明它的外观方式。垂直的吗？这里有两个答案，都编码为使您的代码水平化。 - apollo

感谢您的反馈。在问题中，我展示了垂直和水平视图中的进度指示器。 - Some User

@ZachTempleton 请参见上面的编辑。如果符合您的需求，请为我的答案点赞。 - apollo

Answer 2

我使用了 @apollo 的解决方案，并对 ul 类进行了简单的更改。

我使用了 <ul class="list-inline"> 而不是 <ul class="list-unstyled">

为您创建了 JsFiddle。

- xaid

---

这个会垂直吗？另外，有没有办法使用实线而不是破折号（------）？ - Some User

对于实线，您需要在代码中进行一些小修改。 JsFiddle 对于垂直线，您需要编写不同的代码。我已经在上面的链接中都做了！ - xaid