html - 在 Bootstrap 中，如何使我的步进器全宽

Question

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://uselooper.com/assets/vendor/fontawesome/css/all.css" rel="stylesheet"/>
<link href="https://uselooper.com/assets/stylesheets/custom.css" rel="stylesheet"/>
<link href="https://uselooper.com/assets/vendor/open-iconic/css/open-iconic-bootstrap.min.css" rel="stylesheet"/>
<link href="https://uselooper.com/assets/stylesheets/theme.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- .card -->
<div class="card">
  <!-- .card-body -->
  <div class="card-body">
    <!-- .progress-list -->
    <ol class="progress-list mb-0 mb-sm-4">
      <li class="success">
        <button type="button">
        <!-- progress indicator -->
        <span class="progress-indicator"></span></button> <span class="progress-label d-none d-sm-inline-block">Step 1</span>
      </li>
      <li class="success">
        <button type="button">
        <!-- progress indicator -->
        <span class="progress-indicator"></span></button> <span class="progress-label d-none d-sm-inline-block">Step 2</span>
      </li>
      <li class="active error">
        <button type="button">
        <!-- progress indicator -->
     <span class="progress-indicator"></span></button> <span class="progress-label d-none d-sm-inline-block">Step 3</span>
      </li>
      <li>
        <button type="button">
        <!-- progress indicator -->
        <span class="progress-indicator"></span></button> <span class="progress-label d-none d-sm-inline-block">Step 4</span>
      </li>
      <li>
        <button type="button">
         <!-- progress indicator -->
         <span class="progress-indicator"></span></button> <span class="progress-label d-none d-sm-inline-block">Step 5</span>
      </li>
    </ol>
    <!-- /.progress-list -->
  </div>
  <!-- /.card-body -->
  <!-- .card-body -->
  <div class="card-body">
    <p> Earum temporibus consequuntur facilis iste obcaecati soluta, inventore, vero labore accusantium in commodi eaque, similique necessitatibus ab dolorem non repudiandae pariatur culpa! </p>
  </div>
  <!-- /.card-body -->
</div>
<!-- /.card -->

我有以下 fiddle :

https://jsfiddle.net/47cpaor3/1/

我希望步进器是全宽的。

我试过改变:

<ol class="progress-list mb-0 mb-sm-4">

到

<ol class="progress-list mb-0 mb-sm-4" style="width: 100%">

但这行不通。

如何将步进器拉伸(stretch)到全宽？

Answer 1

您可以使用此代码

    .progress-list>li {
        position: relative;
        width: 100%;
        text-align: left;
    }
    .progress-list>li:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 10%;
        margin-top: -1px;
        width: 100%;
        height: 3px;
        background-color: rgba(34,34,48,.1);
    }
    .progress-list .progress-label {
        display: inline-block;
        position: absolute;
        top: 1.75rem;
        left: 16%;
        transform: translate3d(-50%,0,0);
        font-size: .875rem;
        color: #888c9b;
    }