输入上方带有标签的内联引导表单答案

【问题标题】：Inline bootstrap form with labels above inputs输入上方带有标签的内联引导表单
【发布时间】：2019-07-17 20:13:27
【问题描述】：

如何将搜索按钮下移到与其他文本字段相同的级别？

  <form>
       <div class="col-md-3 form-group">
         <label for="search">Title</label>
         <input type="text" name="search" id="search" class="form-control" />
       </div>
       <div class="col-md-2 form-group">
         <label for="created_at_gt">Created at from</label>
         <input type="text" name="created_at_gt" id="created_at_gt" class="form-control" />
       </div>
       <div class="col-md-2 form-group">
         <label for="created_at_lt">To</label>
         <input type="text" name="created_at_lt" id="created_at_lt" class="form-control" />
       </div>
       <div class="row align-center">
         <input type="submit" value="search" class="btn btn-primary" />
        </div>
    </form>

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

一种简单的解决方法是添加与其他输入字段相同的结构（同时避免添加可能无法涵盖所有情况的额外 CSS），对于标签，使用 &nbsp; 作为占位符。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br><br><br><br><br><!-- ignore those br, just for stackoverflow full page view -->


<form>
  <div class="col-md-3 form-group">
    <label for="search">Title</label>
    <input type="text" name="search" id="search" class="form-control" />
  </div>
  <div class="col-md-2 form-group">
    <label for="created_at_gt">Created at from</label>
    <input type="text" name="created_at_gt" id="created_at_gt" class="form-control" />
  </div>
  <div class="col-md-2 form-group">
    <label for="created_at_lt">To</label>
    <input type="text" name="created_at_lt" id="created_at_lt" class="form-control" />
  </div>
  <div class="col-md-1 form-group align-center">
    <label for="created_at_lt">&nbsp;</label>
    <input type="submit" value="search" class="btn btn-primary form-control" />
  </div>
</form>

【讨论】：

@CalvT 没关系 =D

【解决方案2】：

另一种简单的方法是将标签的高度添加为边距。

确保您进入 sn-p 的全页视图以查看正确的结果：

.lowered {
  margin-top: 25px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br><br><br><br><br><!-- ignore those br, just for stackoverflow full page view -->


<form>
  <div class="col-md-3 form-group">
    <label for="search">Title</label>
    <input type="text" name="search" id="search" class="form-control" />
  </div>
  <div class="col-md-2 form-group">
    <label for="created_at_gt">Created at from</label>
    <input type="text" name="created_at_gt" id="created_at_gt" class="form-control" />
  </div>
  <div class="col-md-2 form-group">
    <label for="created_at_lt">To</label>
    <input type="text" name="created_at_lt" id="created_at_lt" class="form-control" />
  </div>
  <div class="col-md-2 form-group align-center">
    <input type="submit" value="search" class="btn btn-primary form-control lowered" />
  </div>
</form>

【讨论】：

【解决方案3】：

尝试在标签标签末尾使用br标签

<div class="row">
<div class="col-md-6">
    <label for="search">Title</label><br>
    <input type="text" name="search" id="search" class="form-control" />
</div>
<div class="col-md-6">
    <label for="year">Year</label><br>
    <input type="text" name="year" id="year" class="form-control" />
</div>
</div>

【讨论】：