如何对齐引导3按钮，其中最后一个按钮是全宽

Question

我已阅读有关此主题的文档，并尝试了几种解决方案。 我正在寻找一种方法来对齐按钮组中的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> 

Answer 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

Answer 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