如何在同一个容器的两个单独的列中并排显示 Bootstrap 4 个进度条？
How can I have Bootstrap 4 progress bars side by side within two separate columns in the same container?
我很难控制原生 Bootstrap 4 个进度条的位置。 Bootstrap 的进度条似乎是基于 Flexbox 的组件，这让我很困惑。 I've included an image of my issue here
在我当前的代码中，我有一个容器，其中有一行，其中包含多个进度条。我想要做的是创建 2 个单独的进度条堆栈。它们应该水平居中，而不是像图像中发生的那样接触。
我尝试了很多不同的方式来玩转 CSS 和我在 HTML 中的排序，包括修改 .progressbar class 为 'flex-direction: row'列但仍然没有。我还尝试在该行中使用两个 2 列来查看是否可行，想法是我将在两列中的每一列中创建单独的进度条堆栈，并且进度条的宽度将被限制在它们所在的列中.
不幸的是，这些进度条的样式与我想要的不同。
目前看来，进度条组件可能是因为它的 Flexbox 性质，不喜欢被限制在一个容器中？此外，使用我当前的代码，"left" 堆栈中的进度条与 "right" 堆栈中的进度条接触（它们之间没有 space），并且它们不是内联的。他们想要堆叠在彼此之上，即使我已经尝试过向左浮动和向右浮动。 Picture of what I'd like to achieve (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>
确实 Bootstrap 4 中的进度条是基于 flexbox 的。但他们通常表现得很好。
您的代码中的各个进度条组件有点混乱。
要在它们之间添加一点间距，您可以使用 mb-* class 这是原生的 Bootstrap 4 class 来添加边距底部。我使用 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>
我很难控制原生 Bootstrap 4 个进度条的位置。 Bootstrap 的进度条似乎是基于 Flexbox 的组件，这让我很困惑。 I've included an image of my issue here
在我当前的代码中，我有一个容器，其中有一行，其中包含多个进度条。我想要做的是创建 2 个单独的进度条堆栈。它们应该水平居中，而不是像图像中发生的那样接触。
我尝试了很多不同的方式来玩转 CSS 和我在 HTML 中的排序，包括修改 .progressbar class 为 'flex-direction: row'列但仍然没有。我还尝试在该行中使用两个 2 列来查看是否可行，想法是我将在两列中的每一列中创建单独的进度条堆栈，并且进度条的宽度将被限制在它们所在的列中.
不幸的是，这些进度条的样式与我想要的不同。
目前看来，进度条组件可能是因为它的 Flexbox 性质，不喜欢被限制在一个容器中？此外，使用我当前的代码，"left" 堆栈中的进度条与 "right" 堆栈中的进度条接触（它们之间没有 space），并且它们不是内联的。他们想要堆叠在彼此之上，即使我已经尝试过向左浮动和向右浮动。 Picture of what I'd like to achieve (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>
确实 Bootstrap 4 中的进度条是基于 flexbox 的。但他们通常表现得很好。
您的代码中的各个进度条组件有点混乱。
要在它们之间添加一点间距，您可以使用 mb-* class 这是原生的 Bootstrap 4 class 来添加边距底部。我使用 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>