Question

我正在尝试使用引导框架实现以下样式。我可以实现一些类似的功能，但是问题是保存按钮未正确对齐（不占用可用宽度）。在“保存”按钮和红色边框包装器之间有一个缝隙。有什么办法让按钮采用可用宽度？还是可以使用inline-form之类的东西？请帮忙。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div style="border:1px solid red;" class="container mb-4">
  <div class="row mt-4">
    <div class="col-5">
      <div class="form-group row">
        <label for="sel-city" class="col-form-label col-md-2">Label</label>
        <div class="col-md-10">
          <select class="form-control custom-select" id="sel-city" name="city"></select>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="form-group row">
        <label for="sel-zone" class="col-form-label col-md-2">Label</label>
        <div class="col-md-7">
          <select class="form-control custom-select" id="sel-zone" name="workzone"></select>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-5">
      <div class="form-group row">
        <label for="sel-stage" class="col-form-label col-md-2">label</label>
        <div class="col-md-10">
          <select class="form-control custom-select" id="sel-stage" name="stage">
          </select>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="form-group row">
        <label for="sel-status" class="col-form-label col-md-2">Label</label>
        <div class="col-md-7">
          <select class="form-control custom-select" id="sel-status" name="status"></select>
        </div>
        <button id="btn-status-save" class="btn btn-primary float-right" onclick="saveStatus()">Save</button>
      </div>
    </div>
  </div>
</div>

Answer 1

所以我对您的html进行了一些重组，使其自动流动（请参见示例）

要注意的与您的问题直接相关的关键事项：

对于按钮（类） btn-block：这将使按钮扩展容器div的整个可用宽度。

对于列（类）： align-self-end：将项目放在div的右下角；需要添加mb-3来增加底部边距，以便它与您的其他元素对齐。

noPadding：自定义CSS类。默认情况下，cols在左侧和右侧都有填充。如果您想杀死它，可以使用CSS类覆盖它。

.noPadding {
 padding-right: 0px !important;
 padding-left: 0px !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div style="border:1px solid red;" class="container mb-4">
  <div class="row mt-4">
    <div class="col-5">
      <div class="form-group">
        <label for="sel-city" class="col-form-label col-md-2">Label</label>
        <div class="col-md-10">
          <select class="form-control custom-select" id="sel-city" name="city"></select>
        </div>
      </div>
      <div class="form-group">
        <label for="sel-zone" class="col-form-label col-md-2">Label</label>
        <div class="col-md-10">
          <select class="form-control custom-select" id="sel-zone" name="workzone"></select>
        </div>
      </div>
    </div>
    <div class="col-5">
      <div class="form-group">
        <label for="sel-stage" class="col-form-label col-md-2">label</label>
        <div class="col-md-10">
          <select class="form-control custom-select" id="sel-stage" name="stage">
          </select>
        </div>
      </div>
      <div class="form-group">
          <label for="sel-status" class="col-form-label col-md-2">Label</label>
          <div class="col-md-10">
            <select class="form-control custom-select" id="sel-status" name="status"></select>
          </div>
        </div>
    </div>
    <div class="col align-self-end mb-3 noPadding">
            <button id="btn-status-save" class="btn btn-primary btn-block"  onclick="saveStatus()">Save</button>
    </div>

  </div>

  </div>

如何在bootstrap中实现表格样式？

1 个答案: