1

我在控制本机 Bootstrap 4 进度条的位置时遇到了很多困难。Bootstrap 的进度条似乎是基于 Flexbox 的组件，这让我很困惑。我在这里包含了我的问题的图片

在我当前的代码中，我有一个容器，其中有一行，其中包含多个进度条。我想要做的是创建 2 个独立的进度条堆栈。它们应该水平居中而不是像图像中那样发生接触。

我尝试了许多不同的方式来处理 CSS 和我在 HTML 中的排序，包括使用 'flex-direction: row' 而不是 column 但仍然没有修改 .progressbar 类。我还尝试在行中使用两个 2 列来查看是否可行，我的想法是我将在两列中的每一列中创建单独的进度条堆栈，并且进度条的宽度将被限制在它们所在的列.

不幸的是，这些进度条的样式与我想要的不同。

目前看来，进度条组件可能是因为它的 Flexbox 特性，不喜欢被限制在一个容器中？此外，使用我当前的代码，“左”堆栈中的进度条正在触及“右”堆栈上的进度条（它们之间没有空格），并且它们不是内联的。即使我尝试过左浮动和右浮动，他们也想堆叠在一起。我想要实现的图片（photoshopped）

这是我当前的 HTML：

<section id= "about">
      <h5 class="text-center pb-3">Ready to tackle any challenge. Proven by performance.</h5>
      <div class= "container">
          <div class= "row justify-content-center">
             <div class= "col-sm-12">
               <div class="progress w-25" style="height: 20px">
                  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 50%">75%</div>
                </div>
                <div class="progress w-25" style="height: 20px">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 50%">75%</div>
                  </div>
                   <div class="progress w-25 float-right" style="height: 20px">
                  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 50%">75%</div>
                </div>
          </div>
4

1 回答 1

0

Bootstrap 4 中的进度条确实是基于 flexbox 的。但他们通常表现得很好。

各个进度条组件在您的代码中有些混乱。

要在它们之间添加一点间距，您可以使用作为mb-*本机 Bootstrap 4 类的类来添加边距底部。我曾经mb-2在底部添加 2 个单位的边距。

然后，主要任务变成操纵 Bootstrap 网格以在各种断点处产生所需的外观。我决定在我的例子中使用这个：

第一栏：col-12 col-md-6 col-lg-5 offset-lg-1

第二栏：col-12 col-md-6 col-lg-5

翻译：在最小的屏幕（col）上，两列都会全宽。在中型屏幕 ( col-md-*) 上，它们将分成两半（12 个单元中的 6 个）。在大屏幕上（col-lg-*），它们每个只占用 5 个单位（12 个单位中的 5 个），在大屏幕上，也会有 1 个单位的偏移量（offset-lg-1）。换句话说，一个单元在大屏幕上将是空的，其余的将自动居中。而已！

这是代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


<section id="about">
    <h5 class="text-center pb-3">Ready to tackle any challenge. Proven by performance.</h5>
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6 col-lg-5 offset-lg-1">
                <div class="progress mb-2">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">25%</div>
                </div>
                <div class="progress mb-2">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">25%</div>
                </div>
                <div class="progress mb-2">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">25%</div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-5">
                <div class="progress mb-2">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">25%</div>
                </div>
                <div class="progress mb-2">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">25%</div>
                </div>
                <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">25%</div>
                </div>
            </div>
        </div>
    </div>
</section>

于 2018-01-18T00:55:58.817 回答