按钮下拉菜单不会在流体网格中缩放答案

【问题标题】：Button dropdown does not scale in fluid grid按钮下拉菜单不会在流体网格中缩放
【发布时间】：2014-07-01 21:12:21
【问题描述】：

我们在流体网格中使用 bootstrap 2 按钮下拉菜单，因为按钮下拉菜单的标签有点长。

我们希望这个按钮更具响应性，就像窄屏中的普通按钮一样。下面的例子：第一个按钮是按钮下拉，第二个是普通按钮。第二个按预期缩放，但第一个没有。

代码：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div class="btn-group"> 
                <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
                    Download Rate Letter word1 word2 word3 word4
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li> <a href="#">PDF Format</a>
                    </li>
                    <li> <a href="#">Excel Format</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="span12">
            <button class="btn btn-primary">Download Rate Letter word1 word2 word3 word4</button>
        </div>
    </div>
</div>

有什么办法可以解决吗？

jsFiddler

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

这是因为 .btn-group 有 white-space: nowrap，这意味着内容永远不会“中断”到下一行。

您需要将此添加到您的 CSS 中。

.btn-group {
  white-space: normal;
}

http://jsfiddle.net/35fcA/2/

【讨论】：

【解决方案2】：

我不希望使用 btn-group-justify 自定义引导程序：

<div class="btn-group btn-group-justify">
....
</div>

jsFiddler：http://jsfiddle.net/35fcA/5/

【讨论】：

【解决方案3】：

米歇尔是对的。 white-space: nowrap 是问题所在。需要像她说的那样改成white-space: normal。但接下来的问题将是高度。基本上，当单词按预期运行到第二行时，一个按钮会比其他按钮高。这不是问题，但您可能在按钮上尝试实现边框，或者在悬停时更改背景。这将是一个问题，即它们的高度不同。

在这种情况下，我认为最好添加额外的 CSS 以使高度相等，或者添加 JavaScript/JQuery 以在窗口加载时自动获取最高按钮的高度并使所有按钮的高度相同并调整大小。两者都不是最好的选择，因为很难让 CSS 响应，而且并非所有用户都启用了 JavaScript 等。

我正在寻找相同的解决方案。我也在尝试表格样式，而不是 Bootstrap 3 提供的合理按钮组。我正在使用 Roots 主题（roots.io）。我认为只要你能找到可以工作到 330 像素的东西，你就可以了。

最好使用响应式数据表：

http://css-tricks.com/responsive-data-tables/

然后尝试设置样式以填充容器宽度并使其高度相等，直到它不能很好地适应宽度，然后它会更改为不同样式的菜单。表的问题，是否必须是表，因为 display:table* 在 IE8 和更早版本中不起作用等。即使您可以让@media 查询在 IE8 和更早版本上工作，也很难使用 @media 查询重新设计表，但再次使用 JavaScript，并非所有用户都使用 JavaScript。终极

最终，您问的不是一个小问题。你真的在问“我如何制作多个 div，填充一个容器，并且高度相等，无论 div 的数量是增加还是减少？”

我的想法： 1. 我会让关闭 JavaScript 的人有一个固定的宽度。这很困难，因为移动设备以及它们在扩展浏览器时的行为方式。因此，您必须设置包装内容的最小宽度，然后使用 javascript 将其关闭。 2. 为非 Javascript 用户设计网站，使其在最小宽度下使用 CSS 看起来不错。您可以通过禁用 Javascript、以无 JS 的最小宽度查看网站并进行相应设计来做到这一点。然后使用@media 查询和 JS 修复设计。 3. 使用cssmediaqueries.js 或respond.js 等JS 为IE8 和更早版本（以及更早版本的FireFox 等）启用@media 查询。

这样，如果没有 javascript，就不需要@media 查询，并且没有它，网站的样式也会很好看，这将是最低限度的设计。那么，借助@media 查询和 javascript，您应该能够在所有浏览器（包括旧版浏览器）上让一切看起来都非常完美。

对于您的项目：

我会告诉你的。我仍然认为使用表格来响应宽度和高度将是最好的选择 - 或者想办法让按钮的高度相等。

【讨论】：