防止引导按钮不可见宽度/防止换行答案

【问题标题】：Prevent Bootstrap Button Invisible Width/Prevent New Line防止引导按钮不可见宽度/防止换行
【发布时间】：2013-07-27 09:38:42
【问题描述】：

我有两个 Bootstrap 按钮下拉菜单。如何防止菜单换行到两行？我可以使用跨度类控制菜单的宽度，但代码的作用就像还有更多不可见的输入字段，它强制下一个下拉菜单到下一行。更核心的问题是，这些下拉输入会在它们右侧的下一个元素中强制它们之间留出固定的空间，而不管它们的实际宽度如何。

最终，我希望它们的行为类似于输入按钮，它们彼此紧挨着对齐。见截图。

<div class="row-fluid">
    <!--- BASIC INFO --->
    <div class="span12 well" style="height: 160px; background-color:">
        <input type="text" class="input-small" placeholder="Eye Color">
        <input type="text" class="input-mini" placeholder="Hair">
        <div class="input-prepend">
            <div class="btn-group">
                <button class="btn dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a>aa</a>
                    </li>
                    <li>
                        <a>aa</a>
                    </li>
                    <li>
                        <a>aa</a>
                    </li>
                </ul>
            </div>
            <input class="span4" id="prependedDropdownButton" type="text"  placeholder="Hair">
        </div>
        <div class="input-prepend">
            <div class="btn-group">
                <button class="btn dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a>mm</a>
                    </li>
                    <li>
                        <a>mm</a>
                    </li>
                    <li>
                        <a>mm</a>
                    </li>
                </ul>
            </div>
            <input class="span4" id="prependedDropdownButton" type="text"  placeholder="Hair">
        </div>
    </div>
</div>

【问题讨论】：

你认为你可以把你想要完成的设计视觉呈现吗？我在这里已经有了一个小提琴，但我一直在阅读这个问题，但我并没有完全得到你想要做的事情。 jsfiddle.net/sulfureous/WPCUd
我希望两个下拉列表更窄，并并排显示。间距应与“眼睛颜色”和“头发”输入之间的间距相同。查看更新的屏幕截图。
你能提供你所有的风格或你网站的链接吗？

标签： html css twitter-bootstrap drop-down-menu spacing

【解决方案1】：

在阅读更多 Bootstrap 文档和测试之后，我注意到您想要使用的那些下拉菜单很糟糕，它们没有响应。我认为您最好使用<select> 下拉菜单。

演示

http://jsfiddle.net/sulfureous/X8hdg/

HTML

<div class="row-fluid">
  <div class="well clearfix">
    <div class="row-fluid">

      <div class="span3">
        <input type="text" class="span12" placeholder="Eye Color">
      </div><!--.span3-->

      <div class="span3">
        <input type="text" class="span12" placeholder="Hair">
      </div><!--.span3-->

      <div class="span3">
        <select class="span12">
          <option>Hair</option>
          <option>Black</option>
          <option>Blonde</option>
        </select>
      </div><!--.span3-->

      <div class="span3">
        <select class="span12">
          <option>Race</option>
          <option>Race 01</option>
          <option>Race 02</option>
        </select>
      </div><!--.span3-->

    </div><!--.row-fluid-->
  </div><!--.well .clearfix-->
</div><!--.row-fluid-->

所以我想这是一个替代解决方案，我清理了代码缩进、注释和其他什么，并以我认为对那种响应式菜单有意义的方式划分跨度。

请注意，我添加了 clearfix，删除了内联样式和高度。

让我知道这个解决方案是否符合您的预期，否则使用您希望使用的其他类型的下拉列表是可行的，但您需要进行相当多的修改，如果 Twitter Bootstrap 的人很容易做到这一点元素从一开始就响应。

干杯。

【讨论】：