트위터 부트 스트랩의 전체 너비 분할 드롭 다운 버튼

Question

btn-block (트위터 부트 스트랩 문서에서 example)으로 스타일 화 된 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>

여기

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

는 예제

Answer 2

btn-block 클래스를 .btn-group 요소에 추가하고 dropdownbutton 요소에 width %를 지정하면 트릭을 수행하게됩니다. http://jsfiddle.net/eBJGW/5/

Answer 3

나는 같은 종류의 행동을 찾고 있었고이 flexbox 솔루션을 찾았습니다. http://codepen.io/ibanez182/pen/MwZwJp

flex-grow 속성을 사용하여 우아한 구현입니다.

.btn-flex 클래스를 HTML의 .btn-group에 추가하기 만하면됩니다. 이것은 모든 CSS는 당신이 필요로된다 Nicola Pressi이