Twitterのブートストラップの完全な幅スプリットドロップダウンボタン

Question

btn-block（、Twitter Bootstrap Docsから）のスタイルを持つbutton要素の束を使用しているサイトがあります。私は今、いくつかのボタンを分割ボタン（example）に切り替えたいと思っていますが、分割ボタンと通常ボタンを同じ長さにすることはできません。

私はあらゆる種類のものを試しましたが、これを行う方法が見つからないようです。誰もそれをやったことがありますか？私がしなくても、要素の幅をハードコードしたくないということを覚えておいてください。 （これにはハードコーディングされたパーセンテージも含まれていないことに注意してください。）絶対に必要な場合は、ボタンのトグル部分の幅を定義することで問題ありません。将来的にコードを保守可能にするためにできるだけ少ない「マジックナンバー」を指定したいと考えています。

Answer 1

ラップコンテナのドロップダウン・リード：

（注：この例では、ブートストラップ2.xのためのものです）

.dropdown-lead { 
 
    width: 100%; 
 
} 
 

 
.leadcontainer { 
 
    left: 0; 
 
    position: absolute; 
 
    right: 30px; 
 
} 
 

 
.dropdown-toggle { 
 
    width: 30px; 
 
    float: right; 
 
    box-sizing: border-box; 
 
} 
 

 
.fillsplit { 
 
    position: relative; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 

 
<button class="btn btn-block btn-primary" type="button">Block level button</button> 
 
<div class="btn-group btn-block fillsplit"> 
 
    <div class="leadcontainer"> 
 
    <a class="btn btn-primary dropdown-lead" href="#"><i class="icon-user icon-white"></i> User</a> 
 
    </div> 
 
    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="#"><i class="icon-pencil"></i> Edit</a> 
 
    </li> 
 
    <li><a href="#"><i class="icon-trash"></i> Delete</a> 
 
    </li> 
 
    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a> 
 
    </li> 
 
    <li class="divider"></li> 
 
    <li><a href="#"><i class="i"></i> Make admin</a> 
 
    </li> 
 
    </ul> 
 
    <div> 
 
    </div>

Answer 2

btn-blockクラスを.btn-group要素に追加し、dropdownbutton要素の％widthsを指定すると、そのトリックが実行されます。ここで

.dropdown-lead{ 
    width: 96%; 
    box-sizing: border-box; 
} 
.dropdown-toggle{ 
    width: 4%; 
    box-sizing: border-box; 
} 

は例です：http://jsfiddle.net/eBJGW/5/

Answer 3

私は同じ種類の動作を探していて、このフレックスボックスソリューションを見つけました：http://codepen.io/ibanez182/pen/MwZwJp

これはflex-growプロパティを使用するエレガントな実装です。

.btn-flexクラスをHTMLの.btn-groupに追加するだけです。これはあなたが必要とするすべてのCSSです：

.btn-flex { 
    display: flex; 
    align-items: stretch; 
    align-content: stretch; 
} 

.btn-flex .btn:first-child { 
    flex-grow: 1; 
} 

クレジットは、ペンの作者に行く：Nicola Pressi