代码之家 › 专栏 › 技术社区 › Jonathan Wood

将Twitter引导内联表单组向右对齐?

twitter-bootstrap css html

Jonathan Wood · 技术社区 · 3 年前

我有以下标记。

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

看起来是这样的:

我怎样才能正确对齐我的 <label> 和 <select> 容器中的元素 <div> ?

2 回复 | 直到 3 年前

Yong 3 年前

添加 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>

Yong 3 年前

您可以使用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;

Nelsongt77 3 年前

你可以用 .justify-content-between 和学生一起上课 .row 班

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

剩下的由flex完成。

Tanvir Ahammad Chy 3 年前

代码应该是这样的,

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

.在这是BS5的内置类。希望这能奏效,让我们试试吧。