如何将按钮与文本框控件垂直对齐?

css - 将按钮与表单组对齐( bootstrap 3)-LMLPHP

<div class="row">
  <div class="col-sm-3">
    <div class="form-group">
      <label class="control-label">Stuff 1</label>
      <select class="form-control">
        <option value="1">Item 1</option>
        <option value="2">Item 2</option>
        <option value="3">Item 3</option>
      </select>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="form-group">
      <label class="control-label">Stuff 2</label>
      <select class="form-control">
        <option value="1">Item 1</option>
        <option value="2">Item 2</option>
        <option value="3">Item 3</option>
      </select>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="form-group">
      <label class="control-label">Stuff 3</label>
      <select class="form-control">
        <option value="1">Item 1</option>
        <option value="2">Item 2</option>
        <option value="3">Item 3</option>
      </select>
    </div>
  </div>
  <div class="col-sm-3">
    <button class="btn btn-primary btn-lg btn-block">Search</button>
  </div>
</div>


https://jsfiddle.net/2nn422ax/

最佳答案

请在下面的jsfiddle中查看CSS解决方案:

https://jsfiddle.net/2nn422ax/1/

CSS:

.row{
  position: relative;
 }

.button-container{
  position: absolute;
  bottom: 0;
  right: 0;
}

.form-group{
 margin-bottom: 0px;
}

10-05 20:43
查看更多