0

我们在流体网格中使用 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

4

3 回答 3

2

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

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

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

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

于 2013-10-30T05:01:50.113 回答
0

我宁愿不自定义引导程序btn-group-justify：

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

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

于 2013-10-30T08:53:53.177 回答
0

米歇尔是对的。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 的数量是增加还是减少？” <-- 对于 IE8 和更早版本以及禁用 JavaScript 的人来说，这是一个巨大的问题。

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

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

对于您的项目：

我会让你知道。我仍然认为使用表格来响应宽度和高度将是最好的选择——或者想办法让按钮以其他方式等高。

于 2014-07-01T13:12:21.817 回答