css - 如何将选择控件与其旁边的 Bootstrap 按钮对齐？

Question

我正在使用 boostrap 2.3，我尝试将选择控件与紧随其后的 Bootstrap 按钮水平对齐。

<div class="row-fluid">
    <div class="span3">
        a
    </div>
    <div class="span3">
        b
    </div>
    <div class="span6">
        <a href="#" class="btn btn-primary">...</a>
        <select class="selectized input-large">
            <option>...</option>
        </select>
        <button class="btn btn-primary">...</button>
    </div>
</div>

正在关注 this issue ，我尝试以这种方式更改样式(内联和负上边距):

.selectize-control { display: inline-block; margin-top: -60px; }

它更好(内联)，但不是完全对齐(参见 fiddle ):

Answer 1

我在 .selectize-control 中添加了 selectize 库和垂直居中对齐

$(function() {
  $('#contract').selectize();
});

.selectize-control {
  display: inline-block;
  vertical-align: middle;
}

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span1">XXX</div>
    <div class="span1">XXX</div>
    <div class="span10">XXX</div>
  </div>
  <div class="row-fluid">
    <div class="span1">a</div>
    <div class="span1">b</div>
    <div class="span10"> <a href="#" class="btn btn-primary">button 1</a>

      <select id="contract" class="selectized input-large">
        <option value="1">a</option>
        <option value="2">b</option>
      </select>
      <button id="cmdContractCopy" class="btn btn-primary">button 2</button>
    </div>
  </div>
  <div class="row-fluid">
    <div class="span1">YYY</div>
    <div class="span1">YYY</div>
    <div class="span10">YYY</div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.bootstrap2.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.min.js"></script>