Question

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

我们希望此按钮更响应像窄屏幕中的普通按钮一样。示例如下：第一个按钮是按钮下拉按钮，第二个按钮是普通按钮。第二个是按预期缩放，但第一个不是。

enter image description here

代码：

<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

Answer 1

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

您需要将其添加到CSS中。

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

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

Answer 2

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

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

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

Answer 3

米歇尔是对的。 white-space: nowrap是问题所在。需要像她说的那样改为white-space: normal。但那时问题就是问题。基本上，当单词运行到第二行时，就像它应该的那样，那么一个按钮将比其余的更高。这不是问题，但您可能在按钮上有一个边框，或者在悬停时有不断变化的背景。这是一个问题，他们不是同一个高度。

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

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

最好的方法是使用响应式数据表：

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

然后尝试设置样式以填充容器宽度并且高度相等，直到它不能很好地适合宽度，然后它变为不同的样式菜单。表的问题是，它必须是一个表，因为display：table *在IE8及更老版本中不起作用。使用@media查询很难重新设计表，即使你可以使用@media查询来处理IE8及更早的版本，但是，使用JavaScript，并非所有用户都使用JavaScript。 Ultimatel

最终，你不是在问一个小问题。你真的在问“无论div的数量是增加还是减少，我怎么做多个div，填充容器，高度相等？” ＆lt; - 对于IE8及更早版本以及禁用JavaScript等的人来说，这是一个巨大的问题。

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

这样，如果没有javascript，就不需要@media查询，如果没有它，网站的样式将会很好，这将是最低限度的设计。那么你应该能够在@media查询和javascript的帮助下，在包括旧版浏览器在内的所有浏览器中使所有内容看起来非常完美。

为您的项目：

我会告诉你的。我仍然认为使用表格来响应宽度和高度将是最好的选择 - 要么就是想办法让按钮的高度与其他方式相同。

按钮下拉列表不会在流体网格中缩放

3 个答案: