html - 你如何获得一个元素来填充 btn-group 中的其余空间？

Question

我正在尝试让 Bootstrap btn-group 工作，其中有一些固定元素和中间的 btn，它会增长以填充整个元素。

我正在尝试做的事情的 JSFiddle:http://jsfiddle.net/DTcHh/2988/

基本上我的想法是让 3 和 4 按钮粘在右边，而“此处的文本”元素填充其余空间。菜单固定在左侧。

我试过将 btn-group-justified 放在我想要扩展的元素上，但这会占据整个屏幕宽度，而我希望所有内容都在一条线上.

HTML:

<div class="btn-group" role="group" aria-label="First group" style="width:100%; margin-right:-300px"> 
    <div class="btn-group dropup" role="group"> 
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            Menu <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu"> 
            <li><a href="#">Edit Lead</a></li>
            <li><a href="#">Transfer Call</a></li>
        </ul>
    </div>
    <div class="btn-group" role="group" aria-label="First group" style="width: 100%; margin-right:-320px">
        <span class="btn btn-default" style="width:100%;">
            Some text here
        </span>
    </div>
    <button type="button" class="btn btn-default">3</button>
    <button type="button" class="btn btn-default">4</button>
</div>

知道如何实现吗？

Answer 1

解决了。

需要在父组上设置table-layout:auto，固定尺寸元素添加width:1%，可扩展元素添加width:100%，添加类btn -group-justify 到父组。现在看起来很完美!

fiddle :http://jsfiddle.net/DTcHh/2996/