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

【问题标题】：How to align a selectize control with a boostrap button next to it?如何将选择控件与旁边的引导按钮对齐？
【发布时间】：2015-11-02 12:36:57
【问题描述】：

我正在使用 boostrap 2.3，我尝试将一个选择控件与它之后的引导按钮水平对齐。

<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）：

【问题讨论】：

我们可以把你的代码放在小提琴里吗。
尝试添加一个vertical-align:middle
@Steevan 是的，当然jsfiddle.net/0my82e2f

标签： css twitter-bootstrap selectize.js

【解决方案1】：

我将选择库和垂直对齐中间添加到.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>

【讨论】：

谢谢，虽然我认为将这些样式添加到包裹在 select 周围的 div 中更有意义，这样您就不必应用到每个 selectize

【解决方案2】：

您可以通过以下链接查看。

Fiddle

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

【讨论】：