一段时间以来,我一直在努力将 Bootstrap 进度条与按钮对齐。
我希望右侧的按钮对齐,进度值居中,但我无法同时获得两者。查看我得到的 2 个结果:
第一个的代码是:
PHP:
<div class="col-6 progress-container">
<div class="d-inline-flex progress progress-bar-size m-2">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width:25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<span class="text-dark ml-1"><strong>25%</strong></span>
</div>
</div>
<div class="d-inline-flex">
<form class="form-group" action="action.php" method="post" enctype="multipart/form-data">
<input class="btn btn-sm btn-success" type="submit" value="Update">
</form>
</div>
</div>
CSS:
.progress-container { margin-left: auto; margin-right:auto;}
.progress-bar-size{ height: 25px; width: 75%;}
两个示例之间只有一个变化;在第二个中,我将类“justify-content-center position-absolute w-75”添加到“span”项以使值居中,但这会使按钮向下。
我创建了 2 个 fiddle :
请问关于如何获得这两样东西有什么想法吗?
最佳答案
只需添加 vertical-align: middle;
到 .progress-bar-size
。您需要这样做,因为您的元素是 inline-flex
。
关于html - 将进度条 Bootstrap 4(居中值)与按钮对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56856719/