Bootstrap 4表格按钮位置

嘿，我在网站上的按钮位置有问题

 <form id="filter_view" method="POST"> {% csrf_token %}
    <div class="form-row">
      <div class="form-group col-md-1">
        <label for="select_id">option</label>
        <select id="select_id" class="form-control">
          <option selected>Choose...</option>
          <option>...</option>
        </select>
      </div>
      <div class="form-group col-md-1">
        <label for="inputZip">write</label>
        <input type="text" class="form-control" id="inputZip">
      </div>
      <div class="form-group col-1 align-bottom">
        <button type="submit" class="btn btn-secondary align-bottom">submit</button>
      </div>
    </div>
  </form>

导致此网站：网站查看

但是我想要输入框的行中的提交按钮，任何想法？

使用flexbox并将按钮对齐到列的底部。

查看全屏查看或访问此Codepen

.flex-bottom {
  display: flex;
  align-items: flex-end;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<form>
  <div class="form-row">
    <div class="form-group col-md-1">
      <label for="inputState">option</label>
      <select id="inputState" class="form-control">
          <option selected>Choose...</option>
          <option>...</option>
        </select>
    </div>
    <div class="form-group col-md-1">
      <label for="inputZip">write</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
    <div class="form-group col-1 flex-bottom ">
      <button type="submit" class="btn btn-secondary ">submit</button>
    </div>
  </div>
</form>

您可以在表单标签中添加" form-inline"类，并在最后一个形式组中添加标签。

。

.form-inline .form-control {
margin-left:5px;
margin-right:5px;
}
.form-inline .btn {
margin-left:5px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
  <form class="form-inline">
    <label for="select_id">option</label>
        <select id="select_id" class="form-control">
          <option selected>Choose...</option>
          <option>...</option>
        </select>
        <label for="inputZip">write</label>
        <input type="text" class="form-control" id="inputZip">
        <button type="submit" class="btn btn-secondary align-bottom">submit</button>
  </form>
</body>
</html>

相关内容

最新更新

热门标签：