使用 Bootstrap 进行 HTML 定位

Question

我正在尝试在中心徽标下方的空白处添加一个进度条。但是由于我使用的是容器流体，因此我不能使用"对齐项目结束"，因为出于某种原因，它进一步扩展了容器高度。有人可以告诉我应该如何更改它，以便我可以在徽标下方添加进度条，而不会弄乱"创建"和"探索"定位吗？在这个JSFiddle链接中，我添加了我正在使用的代码。 https://jsfiddle.net/mrwadepro/zzf5j3fm/13/

下面是我尝试添加的进度条

<div class="row align-items-end">
<div class="row">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
</div>
</div>
</div>

Answer 1

您有一个引导程序.row立即嵌套在另一个.row中。你永远不应该这样做。嵌套.row后必须始终至少跟一个引导列。此外，在这种情况下，嵌套是完全不必要的。

您还使用了许多不必要的自定义css。没有必要，因为这些任务可以使用本机 Bootstrap 4 类来完成。当您引入不必要的自定义 css hacks 时，您将不可避免地需要更多的自定义 css hack 来解决原始 css hacks 引起的问题。

这是一个干净的代码片段，无需任何自定义 css 和align-items-end类即可完成工作(单击下面的"运行代码片段")：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col text-center">
<img src="http://i65.tinypic.com/29kpg7p.png" width="100" height="140">
</div>
</div>
<div class="row align-items-center">
<div class="col-6">
<a href="#" name="redirectCreate" onClick="redirectCreate()">
<h1 class="text-center">
Create</h1>
</a>
</div>
<div class="col-6 text-center">
<a href="#" name="redirectExplore" onClick="redirectExplore()">
<h1 class="text-center">
Explore</h1>
</a>
</div>
</div>
<div class="row">
<div class="col">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
</div>
</div>
</div>