代码之家 › 专栏 › 技术社区 › Vipin

使用带有标签的窗体组按钮将与顶部对齐

bootstrap-4 css html

Vipin · 技术社区 · 5 年前

我正在使用引导程序4。当我在下面的示例中使用表单组时。对齐“保存”按钮时出现问题。它正与顶部对齐。因为我没有相同级别的标签。

我试过用这个例子 Bootstrap form inline with labels above, position button

但我仍然需要硬编码页边空白顶部。否则按钮将与底部对齐。不管怎样,我可以使用纯引导而不使用覆盖来实现这一点吗?

<form method="POST" enctype="multipart/form-data" class="form-horizontal">
  <div class="form-group row">
    <div class="col-md-4">
      <input class="form-control" type="text" placeholder="Search by Unit" />
    </div>
    <div class="col-md-4">
      <button type="submit" class="btn  btn-primary"><i class="fa fa-fw fa-search"></i>Search</button>
    </div>
  </div>
</form>
<form method="POST" enctype="multipart/form-data" class="form-horizontal">
  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <label for="zones">Zones</label>
        <select class="form-control" id="zones">
          <option>Zone1</option>
          <option>Zone2</option>
        </select>
      </div>
    </div>
    <div class="col-md-5">
      <div class="form-group">
        <label for="unitname">Unit Name</label>
        <input class="form-control" type="text" id="unitname" placeholder="Enter the Unit Name" />
      </div>
    </div>
    <div class="col-md-3">
      <button type="submit"  class="btn  btn-primary"><i
          class="fa fa-fw fa-save"></i>Save</button>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-md-12">
      <table class="table table-stripped">
        <thead>
          <tr>
            <th>#</th>
            <th>Zone Name</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let zone of zones|async">
            <td>{{zone.zoneId}}</td>
            <td>{{zone.zoneName}}</td>
            <td>{{zone.status}}</td>
          </tr>
        </tbody>

      </table>
    </div>
  </div>
</form>

1 回复 | 直到 5 年前

Shidersz 5 年前

一种解决方案是将按钮包装在 form-group 然后添加类 d-flex 和 align-items-end 到 col-* 包含它的DIV。例子:

<div class="col-md-3 d-flex align-items-end">
  <div class="form-group">
    <button type="submit" class="btn btn-primary">
      <i class="fa fa-fw fa-save"></i>Save
    </button>
  </div>
</div>

最小化示例:

注意 border 和 border-* 类只是帮助可视化布局。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<div class="container-fluid">

<form method="POST" enctype="multipart/form-data" class="form-horizontal">
  <div class="form-group row">
    <div class="col-md-4">
      <input class="form-control" type="text" placeholder="Search by Unit"/>
    </div>
    <div class="col-md-4">
      <button type="submit" class="btn btn-primary">
        <i class="fa fa-fw fa-search"></i>Search
      </button>
    </div>
  </div>
</form>

<form method="POST" enctype="multipart/form-data" class="form-horizontal">
  <div class="row">
    <div class="col-md-4 border border-warning">
      <div class="form-group">
        <label for="zones">Zones</label>
        <select class="form-control" id="zones">
          <option>Zone1</option>
          <option>Zone2</option>
        </select>
      </div>
    </div>
    <div class="col-md-5 border border-primary">
      <div class="form-group">
        <label for="unitname">Unit Name</label>
        <input class="form-control" type="text" id="unitname" placeholder="Enter the Unit Name" />
      </div>
    </div>
    <div class="col-md-3 d-flex align-items-end border border-danger">
      <div class="form-group">
        <button type="submit" class="btn btn-primary">
          <i class="fa fa-fw fa-save"></i>Save
        </button>
      </div>
    </div>
  </div>
</form>

</div>