html - 使用标签时按钮不会与输入字段对齐

Question

我包含了一个 HTML( Bootstrap )表单，这给我带来了一些麻烦。此表单需要有一个按钮来按下以生成新的字段行。不过，我还不关心按钮的功能。我只想让该死的按钮与文本框而不是标签对齐。

谁能帮我将“+”按钮与文本字段对齐？我知道这个问题之前已经讨论过几次了。我一直试图弄清楚这一点，时间令人尴尬。已经尝试了各种方法和方法，但我觉得我从根本上遗漏了一些东西；一些显而易见的事情。

JS FIDDLE EXAMPLE

<div class="container col-md-12">
  <form role="form">
    <div class="row">
      <div class="col-md-6 padding-top-10">
        <div class="form-group">
          <label for="showName">Show Name</label>
          <input type="text" class="form-control" id="showName" placeholder="Enter the show name">
        </div>
      </div>

      <div class="col-md-6 padding-top-10">
        <div class="form-group">
          <label for="showDate">Date(s) of Show</label>
          <input type="text" class="form-control" id="showDate" placeholder="Please enter the date(s) of the event.">
        </div>
      </div>
    </div>

    <div class="row">

      <div class="col-md-3 padding-top-10">
        <div class="form-group">
          <label for="band">Band Name</label>
          <select id="band" class="form-control">
            <option value="">Select Band</option>;
          </select>
        </div>
      </div>

      <div class="col-md-3 padding-top-10">
        <div class="form-group">
          <label for="stage">Stage</label>
          <select id="stage" class="form-control">
            <option value="">Select Stage</option>;
          </select>
        </div>
      </div>

      <div class="col-md-3 padding-top-10">
        <div class="form-group">
          <label for="speciesnumber1">Show Time</label>
          <input type="time" id="speciesnumber1" name="speciesnumber1" class="form-control">
        </div>
      </div>

      <div class="col-md-3 padding-top-10">
        <div class="form-group" style="vertical-align:bottom">
          <div class="btn btn-danger alignment">+</div>
        </div>
      </div>

    </div>

    <div class="row">

      <div class="col-md-12 padding-top-10">
        <button type="submit" class="btn btn-primary pull-right" align="right">Submit</button>
      </div>

    </div>
  </form>
</div>

Answer 1

用align-items: flex-end设置display: flex中的第二行容器

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

https://jsfiddle.net/24dd1bxd/4/