如何在最后一个按钮为全宽的地方对齐引导程序 3 按钮答案

【问题标题】：How to align bootstrap 3 buttons where the last button is full width如何在最后一个按钮为全宽的地方对齐引导程序 3 按钮
【发布时间】：2014-10-22 20:34:50
【问题描述】：

我已阅读有关此主题的文档并尝试了多种解决方案。我正在寻找一种方法来对齐按钮组中的 3 个引导按钮，其中前 2 个按钮仅占用其内容所需的宽度，最后一个按钮占用其父容器的全部宽度。

Plunker：http://plnkr.co/edit/fxpcJE018kW1d72tK9Nn?p=preview

<div class="col-md-12">
  <div class="btn-group-justified">
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-move"></span>
    </button>
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-plus"></span>
    </button>
    <div class="btn btn-default btn-block">Expand this div button to full width</div>
  </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

使用一点 jQuery 很容易得到你想要的：

HTML：

<div id="my-row" class="col-md-12 row">
<button type="button" id="btn1" class="btn btn-default">
  <span class="glyphicon glyphicon-move"></span>
</button>
<button type="button" id="btn2" class="btn btn-default">
  <span class="glyphicon glyphicon-plus"></span>
</button>
<div class="btn btn-default stretch">Expand this div button to full width</div>

CSS：

#my-row{
    padding: 0px;
    margin: 0px;
}

jQuery:

var width = $('#my-row').width()-($('#btn1').width() + $('#btn2').width()+60);

$( "div.stretch" ).css( "width", width);

$( window ).resize(function() {

    var width = $('#my-row').width()-($('#btn1').width() + $('#btn2').width()+60);

    $( "div.stretch" ).css( "width", width);
});

JsFiddle：

JsFiddle

【讨论】：

【解决方案2】：

这个解决方案可以给出解决方案

    <div class="row">
            <div class="col-md-12">
                    <div class="btn-group-justified"id="b">
                        <button type="button" class="btn btn-default"id="a">
                            <span class="glyphicon glyphicon-move"></span>
                        </button>
                        <button type="button" class="btn btn-default"id="aa" >
                            <span class="glyphicon glyphicon-plus"></span>
                        </button>
                        <div class="btn btn-default btn-block"id="aaa">Expand this div button to full width</div>
                    </div>
            </div>
        </div>
  </body>

css

#aaa{
    width:100%;
    clear:right;
}
#a{
float:left;
}
#aa{
 float:left;
}

jsfiddle

【讨论】：