Question

我已经包含了一个HTML（引导程序）表单，这给我带来了一些麻烦。此表单需要按下按钮才能生成新的字段行。但是，我并不关心按钮的功能。我只想让该死的按钮与文本框对齐而不是标签。

有人可以帮助我在文本字段中添加“+”按钮吗？我知道之前已经讨论了几次这个问题。我一直在试图解决这个问题，这是一段令人尴尬的时间。已经尝试了各种方法和方法，但我觉得我从根本上缺少一些东西;显而易见的事。

<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

使用display: flex

在align-items: flex-end中设置第二行容器

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

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

Answer 2

<html>
<head>
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
 @media screen and (min-width: 48em) {
	.padding-top-24{
		padding-top:24px;
	}
}
</style>
</head>
<body>
<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-24">
        <div class="form-group">
          <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>
</body>
</html>

我已将padding-top-24 css类添加到+按钮div并添加@media css以使其响应。

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

2 个答案: