버튼 그룹의 너비를 100 %로 설정하고 버튼의 너비를 같게 만드시겠습니까?

버튼 그룹의 너비를 100 %로 설정하고 버튼의 너비를 같게 만드시겠습니까?

---

부트 스트랩을 사용하고 있으며 전체 btn-group가 부모 요소의 100 % 너비를 갖도록 설정하고 싶습니다 . 또한 내부 버튼이 동일한 너비를 갖기를 바랍니다. 이대로 나도 이룰 수 없다.

여기에 JSFiddle을 만들었습니다 : http://jsfiddle.net/BcQZR/12/

다음은 HTML입니다.

<div class="span8 background">
<div class="btn-group btn-block" id="colours">
<span class="btn"><input type='checkbox' name='size' value='red'/>red</span>
<span class="btn"><input type='checkbox' name='size' value='orange'/>orange</span>
<span class="btn"><input type='checkbox' name='size' value='yellow'/>yellow</span>
</div> <!-- /btn-group -->
</div>

그리고 작동하지 않는 현재 CSS가 있습니다.

#colours { 
  width: 100%;
}

---

BOOTSTRAP 2 ( 소스 )

문제는 버튼에 너비가 설정되어 있지 않다는 것입니다. 이 시도:

.btn {width:20%;}

편집하다:

기본적으로 버튼은 텍스트 길이에 약간의 패딩을 더한 자동 너비를 취하므로, 예를 들어 5 개의 버튼 (패딩을 보완하기 위해)에 대해 14.5 %와 비슷할 것입니다.

노트 :

패딩을 시도하고 보상하지 않으려면 다음을 사용할 수 있습니다. box-sizing:border-box;

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

---

부트 스트랩에는 .btn-group-justifiedCSS 클래스가 있습니다.

구조화 방법은 사용하는 태그 유형에 따라 다릅니다.

로 <a>태그

<div class="btn-group btn-group-justified" role="group" aria-label="...">
   ...
</div>

로 <button>태그

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

---

추가 CSS가 필요 .btn-group-justified하지 않습니다.

이것을 부모 요소에 추가 한 다음 div의 각 btn 요소를 다음과 같이 .btn-group으로 래핑해야합니다.

    <div class="form-group">

            <div class="btn-group btn-group-justified">
                <div class="btn-group">
                    <button type="submit" id="like" class="btn btn-lg btn-success ">Like</button>
                </div>
                <div class="btn-group">
                    <button type="submit" id="nope" class="btn btn-lg btn-danger ">Nope</button>
                </div>
            </div>

        </div>

---

.btn 그룹에 항상 동일한 수의 항목이 있다고 가정하기 때문에 .btn의 설정 너비 솔루션이 마음에 들지 않습니다. 이것은 잘못된 가정이며 부풀려진 프레젠테이션 관련 CSS로 이어집니다.

더 나은 해결책은 .btn-block 및 자식 .btn (s)이있는 .btn-group이 표시되는 방식을 변경하는 것입니다. 나는 이것이 당신이 찾고있는 것이라고 믿습니다.

.btn-group.btn-block {
    display: table;
}
.btn-group.btn-block > .btn {
    display: table-cell;
}

여기 바이올린이 있습니다 : http://jsfiddle.net/DEwX8/123/

If you'd prefer to have equal-width buttons (within reason) and can support only browsers that support flexbox, try this instead:

.btn-group.btn-block {
    display: flex;
}
.btn-group.btn-block > .btn {
    flex: 1;
}

Here's a fiddle: http://jsfiddle.net/DEwX8/124/

---

For bootstrap 4 just add this class:

w-100

---

Angular - equal width button group

Assuming you have an array of 'things' in your scope...

• Make sure the parent div has a width of 100%.
• Use ng-repeat to create the buttons within the button group.
• Use ng-style to calculate the width for each button.

---

<div class="btn-group"
     style="width: 100%;">
    <button ng-repeat="thing in things"
            class="btn btn-default"
            ng-style="{width: (100/things.length)+'%'}">
        {{thing}}
    </button>
</div>

---

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

<div class="btn-group btn-block">
  <button type="button" data-toggle="dropdown" class="btn btn-default btn-xs  btn-block  dropdown-toggle">Actions <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span></button><ul role="menu" class="dropdown-menu"><li><a href="#">Action one</a></li><li class="divider"></li><li><a href="#" >Action Two</a></li></ul></div>

---

Bootstrap 4

            <ul class="nav nav-pills nav-fill">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Active</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Longer nav link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>

---

Bootstrap 4 Solution

<div class="btn-group w-100">
    <button type="button" class="btn">One</button>
    <button type="button" class="btn">Two</button>
    <button type="button" class="btn">Three</button>
</div>

You basically tell the btn-group container to have width 100% by adding w-100 class to it. The buttons inside will fill in the whole space automatically.

참고URL : https://stackoverflow.com/questions/14205125/set-a-button-groups-width-to-100-and-make-buttons-equal-width