如何使一个 selectize 控件与旁边的 bootstrap 按钮对齐？

Question

我正在使用 Bootstrap 2.3，并尝试将 Selectize 控件水平对齐在一个 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>

在这个问题之后，我尝试通过以下方式（内联样式和负上边距）更改样式：

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

这样（inline）更好，但并不是完美对齐的（见fiddle）：

- Benjamin BALET

---

请问能否把你的代码放在 Fiddle 上呢？ - Steevan

尝试添加 vertical-align:middle。 - Juan

@Steevan 好的，当然可以 https://jsfiddle.net/0my82e2f/ - Benjamin BALET

Answer 1

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

$(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>

- Juan

---

谢谢，虽然我认为将这些样式添加到包裹选择器的 div 中更有意义，这样您就不必应用于每个 selectize。 - ykay says Reinstate Monica

Answer 2

你可以通过以下链接进行检查。

Fiddle

(请保留HTML标签)

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

- Steevan