14

私のサイトには、buttonスタイル設定された要素の束を使用している場所がありますbtn-block（Twitter Bootstrap Docsの例）。いくつかを分割ボタンに切り替えたいのですが（例）、分割ボタンと通常のボタンを同じ長さにすることができないようです。

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

4

3 に答える 3

7

ドロップダウンリードをコンテナにラップします。

（注：この例はBootstrap 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>

于 2013-02-05T12:32:33.147 に答える
5

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

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

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

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

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

クレジットはペンの作者に与えられます：Nicola Pressi

于 2016-08-06T16:02:25.843 に答える
1

クラスbtn-blockを.btn-group要素に追加し、ドロップダウンボタン要素に％widthsを指定すると、それでうまくいきます。

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

次に例を示します：http：//jsfiddle.net/eBJGW/5/

于 2013-02-04T23:52:00.073 に答える