如何将选择控件与其旁边的引导按钮对齐？

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>

Answer 2

您可以通过下面的link.

进行确认

Fiddle

    .left{
    float:left;
    padding:2px;
    }

如何将选择控件与其旁边的引导按钮对齐？

How to align a selectize control with a boostrap button next to it?

css

twitter-bootstrap

selectize.js