Css Twitter引导：内联选择未对齐

见：

最低价格
2000美元
4千美元
六千美元
800美元
10000美元
1.5万美元
2万美元
2.5万美元
最高价格
2000美元
4千美元
六千美元
800美元
10000美元
1.5万美元
2万美元
2.5万美元+
最小年
1990
2000
2005
2010
2011
2012
2013
最大年份
1990
2000
2005
2010
2011
2012
2013

如果将结果窗格设置得足够宽，您将看到选择字段尝试以内联布局显示。我对此有点问题，但在JSFIDLE中看不清楚

我的屏幕截图

---

问题如下：

    <div class="span2">
    ...other code
        <div class="span6">
             your dropdown    
        </div>
     ...other code
    </div>

…其他代码
你的下拉列表
…其他代码

您正试图将一个span6放入一个span2容器中，但容器不够大，无法容纳它

您需要将span2更改为span12，如下所示：

或者请注意，如果要将两个span6放在一个span 2中，则需要有更多的

例如

流体12
流体6
流体6
流体6
流体6

首先，您放置的JSFIDLE不会重现您的问题（还有另一个问题：widtch太小），我不明白这一点

---

无论如何，在select:

上加上span6，这种问题通常是由元素之间的空格引起的

因为如果一个元素占50%，第二个元素也占50%，那么它们之间的一个简单空格会使它们大于100%

通常，您可以：


删除图元之间的空格/特征线（在本例中，选择）
将容器的fontsize设置为0，以便空格“不占用空格”。）

这可能不是解决您的特殊情况的方法，但可能适用于其他具有相同问题的人

让我知道

编辑：

请看这个修改过的提琴：我在MacOs上使用chrome，我们知道结果可能不同，但当我尝试你的例子时，每个选择都在不同的线上

在这里的小提琴中，我删除了第一组选择之间的空格/特征线。现在，它们显示在同一行上（您正在查找的内容），而第二组中的选择被放置在不同的行上

这里是重要的部分，请注意，我已经删除了结束选择和第二个选择之间的任何空格或特征线：

<div class="control-group">
    <div class="controls">
        <select class="span6" name="range-from:price" id="price_from">
            ...
        </select><select class="span6 pull-right" name="range-to:price" id="price_to">
            ...
        </select>
    </div>
</div>


...
...
您包含的bootstrap-combined.min.css文件包括bootstrap响应文件。编译后的响应样式具有非常精确的.span*元素宽度百分比。在使用Chrome中的代码和开发工具后，我发现不同的浏览器宽度确实会产生不同的结果

例1：浏览器宽度至少为1200px


例2：浏览器宽度介于786和969px之间


这些宽度似乎是为div设计的，没有考虑选择框的多余宽度

css忍者可能有更好的解决方案。但是将“选择宽度”设置得稍微小一点可以解决问题，而不会使窗体看起来太糟糕

<style type="text/css">
  .row-fluid select.span6 {
    width: 48%;
  }
</style>


.row流体选择。span6{
宽度：48%；
}

对于select.span6，48.0%对我来说似乎很好，但由于这些是本机选择框，所以不同操作系统的宽度可能不同。（我使用的是OSX。）使用上面的不同值，看看什么最适合所有可能的浏览器宽度

此外，如果您不需要响应功能（即，如果您不关心您的站点正在进行移动优化），则只包括常规引导css。然后，您的站点将以一种方式显示在所有视口中，您不必担心它在所有设备上的外观。
我还认为问题在于元素之间存在空白（第二对
选择标记之间存在空白）。在
inline
和
inline block
元素中，它们确实很重要，因为当它们超过容器宽度时，它们会强制元素像单词一样进行包装。两个简单的解决方案是，要么删除元素之间的空格，要么添加一个
空白：nowrap父元素的规则。
我认为您的问题在于当您应用
<div class="control-group">
    <div class="controls">
        <select class="span6" name="range-from:price" id="price_from">
            ...
        </select><select class="span6 pull-right" name="range-to:price" id="price_to">
            ...
        </select>
    </div>
</div>

<style type="text/css">
  .row-fluid select.span6 {
    width: 48%;
  }
</style>

<div class="controls">
    <div class="span6">
        <select style="width:100%" name="range-from:model_year" id="model_year_from">
            <option value="">Min Year</option>              
            <option value="1990">1990</option>
            <option value="2000">2000</option>
            <option value="2005">2005</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
            <option value="2013">2013</option>
        </select>
    </div>

    <div class="span6 pull-right">
        <select style="width:100%" name="range-to:model_year" id="model_year_to">
            <option value="">Max Year</option>
            <option value="1990">1990</option>
            <option value="2000">2000</option>
            <option value="2005">2005</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
            <option value="2013">2013</option>
        </select>
    </div>
</div>