html - Bootstrap <input> 在 div 中对齐顶部

Question

如何将 Bootstrap 输入字段与 div 顶部对齐？
我使用一个文本输入，然后是一个 3 行的文本区域。
现在我想要输入字段和文本区域具有相同的“顶行”。

像这样:

-----     -----
-----     

          -----

而不是像这样(在 div 中间):

          -----

-----     
-----

          -----

代码

<form class="form form-inline">
  <!-- Label -->
  <div class="col-md-1">
    <label class="label label-danger">Kommentar <span class="glyphicon glyphicon-arrow-right"></span></label>
  </div>
  <!--Name input-->
    <input class="form-control col-md-offset-1" type="text" id="name_input" name="name_input" placeholder="Namn" required="">
    <textarea class="form-control col-md-offset-1" rows="3" id="input_text" name="text_input" placeholder="Kommentar.." required=""></textarea>
</form>

Answer 1

添加 vertical-align: top; 将解决您的问题。

在此处检查更新后的代码:

.form-control.col-md-offset-1 {
    vertical-align: top;
}

<form class="form form-inline">
  <!-- Label -->
  <div class="col-md-1">
    <label class="label label-danger">Kommentar <span class="glyphicon glyphicon-arrow-right"></span></label>
  </div>
  <!--Name input-->
    <input class="form-control col-md-offset-1" type="text" id="name_input" name="name_input" placeholder="Namn" required="">
    <textarea class="form-control col-md-offset-1" rows="3" id="input_text" name="text_input" placeholder="Kommentar.." required=""></textarea>
</form>