停止btn-group包装按钮

Question

我有一个包含引导水平btn-group的小div。按钮是包装的，因为div不够宽，不适合它。

如何停止此操作并使按钮全部水平和水平居中？

问题：

应该如何看待：

<div class="vd-text-widget" style="position: absolute; background-color: #eee; width: 10%; height: 15%; left: 10%; top: 50%">

    <div class="btn-group btn-group-lg btn-group-horizontal">
        <button class="btn btn-default">
            <span class="glyphicon glyphicon-th-list"></span>
        </button>
        <button class="btn btn-default">
            <span class="glyphicon glyphicon-header"></span>
        </button>
        <button class="btn btn-default">
            <span class="glyphicon glyphicon-link"></span>
        </button>
        <button class="btn btn-default">
            <span class="glyphicon glyphicon-font"></span>
        </button>
        <button class="btn btn-default">
            <span class="glyphicon glyphicon-text-size"></span>
        </button>
    </div>

    <p>abbnnb </p>
</div>

修改：使用display: -moz-box可以在Firefox上运行。将研究其他浏览器解决方案。有任何想法如何使其水平居中？

Answer 1

将宽度更改为20%

style="position: absolute; background-color: #eee; width: 20%; height: 15%; left: 10%; top: 50%"

Online Demo

或者您可以通过将btn-group-lg更改为btn-group-sm

来执行此操作

Answer 2

这对我有用：

 <div class="btn-group" style="display: flex">

Answer 3

您可以将 white-space：nowrap; 添加到 .vd-text-widget 类。