부트 스트랩이있는 고정 너비 버튼

부트 스트랩이있는 고정 너비 버튼

---

부트 스트랩은 고정 너비 버튼을 지원합니까? 현재 "저장"및 "다운로드"라는 두 개의 단추가 있으면 내용에 따라 단추 크기가 변경됩니다.

또한 부트 스트랩을 확장하는 올바른 방법은 무엇입니까?

---

.btn-block버튼 에서 클래스를 사용 하여 부모 너비로 확장 할 수도 있습니다 .

부모가 고정 너비 요소 인 경우 버튼은 모든 너비를 갖도록 확장됩니다. 고정 / 유체 버튼이 필요한 공간 만 차지하도록 컨테이너에 기존 마크 업을 적용 할 수 있습니다.

<div class="span2">
<p><button class="btn btn-primary btn-block">Save</button></p>
<p><button class="btn btn-success btn-block">Download</button></p>
</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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="span2">
  <p><button class="btn btn-primary btn-block">Save</button></p>
  <p><button class="btn btn-success btn-block">Download</button></p>
</div>

---

이렇게하려면 두 버튼에 모두 맞는 너비를 찾은 다음 너비가있는 사용자 정의 클래스를 만들고 버튼에 다음과 같이 추가하십시오.

CSS

.custom {
    width: 78px !important;
}

그런 다음이 클래스를 사용하여 버튼에 다음과 같이 추가 할 수 있습니다.

<p><button href="#" class="btn btn-primary custom">Save</button></p>
<p><button href="#" class="btn btn-success custom">Download</button></p>

데모 : http://jsfiddle.net/yNsxU/

생성 한 사용자 정의 클래스를 가져 와서 자체 스타일 시트 안에 배치 할 수 있습니다.이 스타일 시트는 부트 스트랩 스타일 시트 다음에로드됩니다. 프레임 워크를 업데이트 할 때 부트 스트랩 스타일 시트에 변경 한 내용이 실수로 손실 될 수 있으므로 변경 사항이 기본값보다 우선하기를 원합니다.

---

클래스 "btn-group"이있는 div 안에 버튼을 배치하면 가장 큰 버튼과 같은 크기로 버튼이 늘어납니다.

예 :

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div> 

부트 스트랩 버튼 그룹

---

버튼의 경우 지정된 최소 너비 및 최대 너비를 가진 특수 클래스의 버튼에 대해 다른 CSS 선택기를 만들 수 있습니다. 버튼이

<button class="save_button">Save</button>

Bootstrap CSS 파일에서 다음과 같은 것을 만들 수 있습니다

.save_button {
    min-width: 80px;
    max-width: 80px;
}

이렇게하면 반응 형 디자인이 있더라도 항상 80px를 유지해야합니다.

Bootstrap을 확장하는 올바른 방법으로이 스레드를 살펴보십시오.

부트 스트랩 확장

---

@ kravits88 답변 확장 :

이렇게하면 버튼이 전체 너비에 맞게 늘어납니다.

<div className="btn-group-justified">
<div className="btn-group">
  <button type="button" className="btn btn-primary">SAVE MY DEAR!</button>
</div>
<div className="btn-group">
  <button type="button" className="btn btn-default">CANCEL</button>
</div>
</div>

---

BS 4에서는 크기 조정을 사용하고 w-100을 적용하여 버튼이 부모 컨테이너의 전체 너비를 차지할 수 있습니다.

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

<p>
  Using btn-block
</p>
<div class="container-fluid">
  <div class="btn-group col" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-secondary">Left</button>
    <button type="button" class="btn btn-outline-secondary btn-block">Middle</button>
    <button type="button" class="btn btn-outline-secondary">Right</button>
  </div>
</div>

<p>
  Using w-100
</p>
<div class="container-fluid">
  <div class="btn-group col" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-secondary">Left</button>
    <button type="button" class="btn btn-outline-secondary w-100">Middle</button>
    <button type="button" class="btn btn-outline-secondary">Right</button>
  </div>
</div>

---

부모 컨테이너가 응답하면 블록 너비 버튼이 쉽게 반응하는 버튼이 될 수 있습니다. 고정 너비와! selector 대신에 더 자세한 선택기 경로의 조합을 사용하면 다음과 같은 이유로 생각합니다.

1) 그것은 해킹이 아닙니다 (최소 너비와 최대 너비를 동일하게 설정하는 것은 해킹입니다)

2) 나쁜 습관 인! important 태그를 사용하지 않습니다

3) 너비를 사용하므로 읽을 수 있으며 CSS에서 계단식 작동 방식을 이해하는 사람은 진행 상황을 볼 수 있습니다 (이에 대한 CSS 주석을 남길 수 있습니까)

4) Combine your selectors that apply to your targeted node for increased accuracy

.parent_element .btn.btn-primary.save-button {
    width: 80px;
}

---

btn-group-justified and btn-group only work for static content but not on dynamically created buttons, and fixed with of button in css is not practical as it stay on the same width even all content are short.

My solution: put the same class to group of buttons then loop to all of them, get the width of the longest button and apply it to all

var bwidth=0
$("button.btnGroup").each(function(i,v){
    if($(v).width()>bwidth) bwidth=$(v).width();
});
$("button.btnGroup").width(bwidth);

---

Just came upon the same need and was not satified with defining fixed width.

So did it with jquery:

    var max = Math.max ($("#share_cancel").width (), $("#share_commit").width ());
    $("#share_cancel").width (max);
    $("#share_commit").width (max); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <button type="button" class="btn btn-secondary" id="share_cancel">SHORT</button>
    <button type="button" class="btn btn-success" id="share_commit">LOOOOOOOOONG</button>

---

Best way to the solution of your problem is to use button block btn-block with desired column width.

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


    <div class="col-md-12">
      <button class="btn btn-primary btn-block">Save</button>
    </div>
    <div class="col-md-12">
        <button class="btn btn-success btn-block">Download</button>
    </div>

---

Here I found a solution by comparing buttons in a button-group element. The simple solution is to get the one with the largest width and set the width to the other buttons. So they can have a equal width.

    function EqualizeButtons(parentElementId) {

    var longest = 0; 
    var element = $(parentElementId);

    element.find(".btn:not(.button-controlled)").each(function () {
        $(this).addClass('button-controlled');
        var width = $(this).width();
        if (longest < width) longest = width;

    }).promise().done(function () {
        $('.button-controlled').width(longest);
    });
}

It worked like a charm.

---

This may be a silly solution, but I was looking for a solution to this problem and got lazy.

Anyway, using input class="btn..." ... instead of button and padding the value= attribute with spaces so that they are all the same width works pretty well.

eg :

<input type="submit" class="btn btn-primary" value="   Calculate   "/>    
<input type="reset" class="btn btn-primary"value="     Reset       "/>

I haven't been using bootstrap all that long, and maybe there is a good reason not to use this approach, but thought I might as well share

참고URL : https://stackoverflow.com/questions/11050269/fixed-width-buttons-with-bootstrap