Bootstrap 4表单按钮位置答案

【问题标题】：Bootstrap 4 forms Button locationBootstrap 4表单按钮位置
【发布时间】：2017-11-29 21:09:56
【问题描述】：

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

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

导致这个网站： Website view

但我想要输入框行中的提交按钮，有什么想法吗？

【问题讨论】：

你可以使用空白标签 jsfiddle.net/x1hphsvb/315
很遗憾没有工作
它正在工作，只是增加了视图窗口的大小
我必须在哪里做这个？

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以在表单标签内添加“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>

【讨论】：

@BrotCast，用你的 html 更新答案，不需要添加额外的 css，bootstrap 默认类可以处理这个。
我已经尝试过 form-inline :)，在我这边它现在混合在一起（按钮在文本字段上）