Twitter Bootstrap：内联选择不对齐

时间：2013-02-11 18:28:42

标签： css css3 twitter-bootstrap

参见：http://jsfiddle.net/aGy2P/ 

<!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＆lt; - 来自Chrome，正确对齐

但是，在FF和IE中，“Max Year”选择与“Min Year”不水平对齐;相反，它更低，像这样：

enter image description here＆lt; - 来自FF

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

任何想法有什么不对？

6 个答案:

答案 0 :(得分：2)

问题如下：

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

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

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

http://jsfiddle.net/3N754/

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

E.g。

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

答案 1 :(得分：1)

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

答案 2 :(得分：0)

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

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

上

但你没有把它们放在<div class="row-fluid"></div>。

答案 3 :(得分：0)

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

因为如果一个元素占50％而后者占50％，那么它们之间的简单空间使它们大于100％。

通常你可以：

  • 删除元素之间的空格/分隔线（在本例中为您的选择）
  • 将fontsize设置为0到容器，以便空格“不占用空格”。 ：）

这可能不是您特定情况的解决方案，但也许适用于遇到同类问题的其他人。

让我知道。

编辑：

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

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

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

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

答案 4 :(得分：0)

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

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

1200+px viewport

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

768-969px viewport

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

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

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

对于select.span6，48.0％对我来说似乎不错，但由于这些是原生选择框，因此操作系统之间的宽度可能会有所不同。 （我正在使用OSX。）使用上面的不同值，看看哪种浏览器宽度最适合。

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

答案 5 :(得分：0)

我认为您的问题是，当您将.span6样式应用于选择时，浏览器将应用48，....百分比大小，但随后将添加一些额外长度来渲染组件，使其成为长期适合，因此滑到另一个下面。

作为一种解决方法，我建议将select包装在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>
相关问题
最新问题