我有3个下拉列表和一个提交按钮。每个下拉列表都有一个标签。然后还有一个按钮。我找不到一种方法来对齐按钮和下拉列表本身(而不是标签),所以我最终添加了一个占位符标签,并给它与背景相同的颜色。
但有没有更好的方法呢?
这是不带占位符标签时的外观(查看整页以更好地查看):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<div class="containter-fluid">
<div class="h-100">
<div class="d-flex flex-row-reverse flex-wrap justify-content-start">
<div class="form-group justify-content-end text-right form-inline">
<div class="d-flex flex-column align-items-end">
<label for="select1" dir="rtl">select1:</label>
<select title="select1" class="selectpicker">
<option>option</option>
</select>
</div>
</div>
<div class="form-group justify-content-end text-right form-inline">
<div class="d-flex flex-column align-items-end">
<label for="select2" dir="rtl">select1:</label>
<select title="select2" class="selectpicker">
<option>option</option>
</select>
</div>
</div>
<div class="form-group justify-content-end text-right form-inline">
<div class="d-flex flex-column align-items-end">
<label for="select3" dir="rtl">select1:</label>
<select title="select3" class="selectpicker">
<option>option</option>
</select>
</div>
</div>
<div class="form-group justify-content-end text-right form-inline">
<div class="d-flex flex-column align-items-end">
<button type="button" class="btn btn-primary">Click</button>
</div>
</div>
</div>
</div>
</div>
这是使用占位符标签时的外观(以及我希望它的外观):
x一个一个一个一个x一个一个二个x
1条答案
按热度按时间sbdsn5lh1#
向容器div
<div class="d-flex flex-row-reverse flex-wrap justify-content-start">
添加一个新类,例如align-items,这样您将拥有一个新的div<div class="d-flex flex-row-reverse flex-wrap justify-content-start align-items">
然后将此CSS应用于新创建的角色