将 Twitter Bootstrap 内联表单组向右对齐？

Question

我有以下标记。

<div class="row">
    <div class="col-md-6">
        <h4>Title</h4>
    </div>
    <div class="col-md-6 form-inline">
        <div class="form-group">
            <label for="TrackId">Track:</label>
            <select class="form-control mb-2 mx-sm-4" data-val="true" data-val-required="The Track: field is required." id="TrackId" name="TrackId">
                <option selected="selected" value="1">Track A</option>
                <option value="2">Track B</option>
                <option value="3">Track C aslkdfjaksdfjlskjdflaksdjfklasjdlksdjf</option>
            </select>
        </div>
    </div>
</div>

它看起来像这样：

如何在容器 <div> 中右对齐 <label> 和 <select> 元素？

Answer 1

在这种情况下，您可以使用 Bootstrap 的实用程序类 d-flex 和 align-items-center。请参阅下面的代码段：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="row">
  <div class="col-md-6 col-sm-6">
    <h4>Title</h4>
  </div>
  <div class="col-md-6 col-sm-6">
    <div class="form-group d-flex align-items-center gap-3">
      <label for="TrackId">Track:</label>
      <select class="form-control" data-val="true" data-val-required="The Track: field is required." id="TrackId" name="TrackId">
        <option selected="selected" value="1">Track A</option>
        <option value="2">Track B</option>
        <option value="3">Track C aslkdfjaksdfjlskjdflaksdjfklasjdlksdjf</option>
      </select>
    </div>
  </div>
</div>

如果将这些实用程序类转换为 CSS 那么它就意味着：

display: flex;
flex-direction: row; /*default value for `flexbox`*/
align-items: center;

Answer 2

将 ml-auto 添加到您的 form-group div 应该可以解决问题

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="row">
  <div class="col-md-6">
    <h4>Title</h4>
  </div>
  <div class="col-md-6 form-inline">
    <div class="form-group ml-auto">
      <label for="TrackId">Track:</label>
      <select class="form-control mb-2 mx-sm-4" data-val="true" data-val-required="The Track: field is required." id="TrackId" name="TrackId">
        <option selected="selected" value="1">Track A</option>
        <option value="2">Track B</option>
        <option value="3">Track C aslkdfjaksdfjlskjdflaksdjfklasjdlksdjf</option>
      </select>
    </div>
  </div>
</div>

Answer 3

您可以将 .justify-content-between class 与 .row class 一起使用。

<div class="row justify-content-between">
....
</div>

Flex 完成剩下的工作。

Answer 4

代码应该是这样的，

<div class="row justify-content-between">
    // Other elements here
</div>

.justify-content-between 这是 BS5 中 class 的构建。希望这会奏效，让我们试试吧。

将 Twitter Bootstrap 内联表单组向右对齐？

Aligning Twitter Bootstrap inline form group to the right?

html

css

twitter-bootstrap