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

​

我有以下几把小提琴：

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

但这是行不通的。

如何将步进器拉伸到最大宽度？

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

​

Answer 2

我设置了一些边框，这样我们就可以看到一些东西，并将progress-card上的padding设置为0，但不清楚您可能希望进行哪些其他更改。

​

.card {
  border: solid blue 1px;
}

.card .card-body.progress-card {
  border: solid red 1px;
  padding-left: 0;
  padding-right: 0;
}

.card .progress-list {
  border: 1px solid lime;
}

.card .progress-list .success,
.card .progress-list .error,
.card .progress-list>li {
  border: 1px solid pink;
}


/*
.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>

<div class="card">
  <div class="card-body progress-card">
    <ol class="progress-list">
      <li class="success">
        <button type="button"><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"><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"><span class="progress-indicator"></span></button>
        <span class="progress-label d-none d-sm-inline-block">Step 3</span>
      </li>
      <li>
        <button type="button"><span class="progress-indicator"></span></button>
        <span class="progress-label d-none d-sm-inline-block">Step 4</span>
      </li>
      <li class="">
        <button type="button"><span class="progress-indicator"></span></button>
        <span class="progress-label d-none d-sm-inline-block">Step 5</span>
      </li>
    </ol>
  </div>
  <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>
</div>

​