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

为了创建这个，我当前有以下代码，可以在this 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做到这一点？如果是这样，怎么样？

谢谢！

Answer 1

我对您的HTML代码table使用了基本(horizontal)控件：

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

在你的bootply上尝试这个。 Or click here

垂直版本：

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。

Answer 2

我使用了@ apollo的解决方案并在DefaultListModel<String>课程上进行了简单的更改。

我使用setHint()代替ul

为您创建JsFiddle。

Bootstrap - 进度指标

2 个答案: