css - Twitter Bootstrap：内联选择不对齐

Question

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
    </head>
    <body>

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
            <form method="post" action="">
                <fieldset>
                    <div class="control-group">
                        <div class="controls">
                            <select class="span6" name="range-from:price" id="price_from">
                                <option value="">Min Price</option>                                 
                                <option value="2000">$2K</option>
                                <option value="4000">$4K</option>
                                <option value="6000">$6K</option>
                                <option value="8000">$8K</option>
                                <option value="10000">$10K</option>
                                <option value="15000">$15K</option>
                                <option value="20000">$20K</option>
                                <option value="25000">$25K</option>
                            </select>
                            <select class="span6 pull-right" name="range-to:price" id="price_to">
                                <option value="">Max Price</option>
                                    <option value="2000">$2K</option>
                                <option value="4000">$4K</option>
                                <option value="6000">$6K</option>
                                <option value="8000">$8K</option>
                                <option value="10000">$10K</option>
                                <option value="15000">$15K</option>
                                <option value="20000">$20K</option>
                                <option value="500000">$25K+</option>
                            </select>
                        </div>
                    </div>

                    <div class="control-group">
                        <div class="controls">
                            <select class="span6" 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>
                            <select class="span6 pull-right" 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>
                </fieldset>
            </form>             
        </div>
        <div class="span8">
        </div>
        <div class="span2">         
        </div>
    </div>
</div>
    </body>
</html>

如果您使结果窗格足够宽，您将看到选择字段尝试进入内联布局。我对此有一点问题，但在 JSFiddle 中并没有清楚地看到它。

我的屏幕截图

铬合金 <-- 来自 Chrome，正确对齐

但是，在FF和IE中，“Max Year”选择不与“Min Year”水平对齐；相反，它要低得多，如下所示：

在此处输入图像描述 <-- 来自 FF

最初，我认为这可能与“Min Year”或“Max Year”的内容有关，所以我开始对其进行调整。但没有什么能解决它。当我删除“Min Price”和“Max Price”的节点时，“Min Year”和“Max Year”突然就OK了。

有什么想法有什么问题吗？

score 2 · Accepted Answer

那么问题如下：

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

您正在尝试将 span6 放入 span2 容器中，该容器不足以容纳它。

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

http://jsfiddle.net/3N754/

或者请注意，如果您想将两个 span6 放在一个 span 2 中，您需要有更多<div class='row-fluid'>

例如

<div class="row-fluid">
  <div class="span12">
    Fluid 12
    <div class="row-fluid">
      <div class="span6">
        Fluid 6
        <div class="row-fluid">
          <div class="span6">Fluid 6</div>
          <div class="span6">Fluid 6</div>
        </div>
      </div>
      <div class="span6">Fluid 6</div>
    </div>
  </div>
</div>

score 1 · Accepted Answer

我也相信问题是元素之间的空白（第二对select标签之间有一个）。它们在元素中确实很重要，inline因为inline-block当它们超出容器宽度时，它们会强制元素像单词一样换行。两个简单的解决方案是，要么删除元素之间的空格，要么white-space:nowrap;在父元素上添加规则。

score 0 · Accepted Answer

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

前任。1：浏览器宽度至少1200px

1200+像素视口

前任。2：浏览器宽度在 786 到 969px 之间

768-969px 视口

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

css ninja 可能有比这更好的解决方案。但是将您的选择宽度设置得稍小一点应该可以解决问题，而不会使表单看起来太糟糕。

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

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

此外，如果您不需要响应功能（即，如果您不关心您的网站是否针对移动设备进行了优化），请仅包含常规引导 css。然后，您的网站将针对所有视口以一种方式显示，您不必担心它在所有设备上的外观。

score 0 · Accepted Answer

这种问题通常是由元素之间的空间引起的。

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

通常你可以：

删除元素之间的空格/分隔线（在这种情况下，您的选择）
将容器的字体大小设置为 0，以便空格“不占用空格”。:)

这可能不是您特定情况的解决方案，但可能是其他有相同问题的解决方案。

让我知道。

编辑：

请看这个修改过的小提琴：我在 MacOs 上使用 chrome，我们知道结果可能会有所不同，但是当我尝试你的示例时，每个选择都在不同的行上。

在此处的小提琴http://jsfiddle.net/3nJYY/1/中，我删除了第一组选择之间的空格 /breakline 。现在它们显示在同一行（您要查找的内容），而第二组中的选择被放置在不同的行上。

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

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

score 0 · Accepted Answer

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

无论如何，您将 span6 放在您的选择上：<select class="span6"

但是你没有把它们放在一个<div class="row-fluid"></div>.

score 0 · Accepted Answer

我认为您的问题是，当您将 .span6 样式应用于选择时，浏览器将应用 48,.... 百分比大小，但随后会添加一些额外长度来呈现组件，使其太长而无法适应，因此滑到另一个下方。

作为一种解决方法，我建议将选择包装在 div 中，并将 .span6 类应用于 div，以便您确定浏览器呈现正确的长度。然后，您必须为您的选择添加 100% 的宽度以适合您的 div

http://jsfiddle.net/SkMZ5/2/

例子：

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

css - Twitter Bootstrap：内联选择不对齐

6 回答 6

Related

Reference