Question

我正在尝试垂直对齐一行中的按钮（引导程序）。我无法解决这个问题...任何提示？

<div class="form-group row">
    <div class="col-sm-6">
        <input class="form-control" name="new-project" value="" placeholder="Type project name"></input>
    </div>
    <div class="col-sm-2">
        <button type="button" class="btn btn-sm" style="position: absolute; vertical-align: middle">Save</button>
    </div>
</div>

Answer 1

由于您使用的是小按钮，因此您也应该使用小输入。使用input-group也是一种选择。

请参阅FullPage上的示例代码段。

body {
  padding-top: 50px;
}
.red {
  background: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="form-group">
      <div class="col-sm-6 col-sm-offset-2 red">
        <input class="form-control input-sm" name="new-project" value="" placeholder="Type project name" />
      </div>
      <div class="col-sm-2 red">
        <button type="button" class="btn btn-sm">Save</button>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="row">
    <div class="form-group">
      <div class="col-sm-8 col-sm-offset-2 red">
        <div class="input-group">
          <input class="form-control input-sm" name="new-project" value="" placeholder="Type project name" />
          <span class="input-group-btn">
        <button type="button" class="btn btn-sm">Save</button>
      </span>
        </div>
      </div>
    </div>
  </div>
</div>

垂直对齐按钮连续

1 个答案: