如何對齊引導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