Bootstrap 当几个下拉列表有标签时,如何将按钮与它们对齐?

pexxcrt2  于 2023-01-06  发布在  Bootstrap
关注(0)|答案(1)|浏览(119)

我有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

sbdsn5lh

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应用于新创建的角色

.align-items{
  align-items:flex-end; //puts all items to the bottom of container - in your case it aligns them
}

相关问题