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

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

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

.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을 확장하는 올바른 방법으로이 스레드를 살펴보십시오.

부트 스트랩 확장

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>

@ 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>

btn-group-justified 및 btn-group은 정적 컨텐츠에서만 작동하지만 동적으로 작성된 버튼에서는 작동하지 않으며 CSS에서 버튼으로 고정 된 것은 모든 컨텐츠가 짧은 경우에도 동일한 너비를 유지하므로 실용적이지 않습니다.

내 해결책 : 동일한 클래스를 버튼 그룹에 배치 한 다음 모든 버튼에 반복하여 가장 긴 버튼의 너비를 가져 와서 모두 적용하십시오.

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

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

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

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

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

4) 정확도를 높이기 위해 대상 노드에 적용되는 선택기를 결합하십시오.

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

동일한 요구에 부딪 쳤고 고정 너비를 정의하는 것으로 만족하지 않았습니다.

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>

문제를 해결하는 가장 좋은 방법은 원하는 열 너비의 버튼 블록 btn-block을 사용하는 것입니다.

<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>

여기서 버튼 그룹 요소의 버튼을 비교하여 해결책을 찾았습니다. 간단한 해결책은 가장 큰 너비를 가진 너비를 다른 너비로 설정하는 것입니다. 따라서 그들은 같은 너비를 가질 수 있습니다.

    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);
    });
}

그것은 매력처럼 작동했습니다.

이것은 어리석은 해결책 일 수 있지만이 문제에 대한 해결책을 찾고 있었고 게으르다.

어쨌든 버튼 대신 input class = "btn ..."...을 사용하고 value = 속성을 공백으로 채워서 너비가 모두 같아서 잘 작동합니다.

예 :

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

나는 오랫동안 부트 스트랩을 사용하지 않았으며 아마도이 접근법을 사용하지 않는 좋은 이유가 있지만 공유 할 수도 있다고 생각했습니다.