css - 按钮下拉不会在流体网格中缩放

Question

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

Answer 1

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

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

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

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