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

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

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

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

은 또한 있다니습수도를 할 수 ..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>

부트스트랩 CSS 파일에서 다음과 같은 것을 만들 수 있습니다.

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

이렇게 하면 반응성 설계가 있더라도 항상 80px로 유지됩니다.

부트스트랩을 확장하는 올바른 방법은 다음과 같습니다.

부트스트랩을 확장하는 중

BS 4 및 BS 5에서는 크기 조정을 사용할 수 있으며 버튼이 상위 컨테이너의 전체 너비를 차지할 수 있도록 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>

부트스트랩 5+

그리드 열을 사용하여 너비를 설정하고 여백 끝 유틸리티를 사용하여 간격을 설정합니다.

<div>
  Here are two buttons: 
  <button class="btn btn-primary col-3 me-2">PressMe</button>
  <button class="btn btn-primary col-3">PressMeToo</button>
</div>

btn-group-group 및 btn-group은 정적 콘텐츠에만 작동하지만 동적으로 생성된 버튼에는 작동하지 않으며, 모든 콘텐츠가 짧더라도 같은 너비에 유지되므로 css에서 버튼으로 고정되는 것은 실용적이지 않습니다.

내 해결책: 버튼 그룹에 동일한 클래스를 배치한 다음 모든 버튼에 루프하고 가장 긴 버튼의 너비를 가져와 모든 버튼에 적용합니다.

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

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

블록 너비 단추는 상위 컨테이너가 응답하는 경우 쉽게 응답 단추가 될 수 있습니다.!대신 고정된 너비와 보다 상세한 선택 경로의 조합을 사용하는 것이 중요하다고 생각합니다. 왜냐하면 다음과 같은 이유로:

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

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

폭을 사용하기 때문에 매우 읽기 쉽고 CSS에서 계단식이 어떻게 작동하는지 이해하는 사람은 무슨 일이 일어나고 있는지 알 수 있습니다(이것을 위해 CSS 코멘트를 남길 수 있습니까?)

목표 노드에 적용되는 실렉터를 결합하여 정확도 향상

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

그것은 매력적으로 작동했습니다.

이것은 어리석은 해결책일 수도 있지만, 저는 이 문제에 대한 해결책을 찾다가 게을러졌습니다.

어쨌든 버튼 대신 입력 class="btn..."...을 사용하여 value= 특성을 공백으로 채워 모두 동일한 너비가 되도록 하는 것이 좋습니다.

예:

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

저는 부트스트랩을 그렇게 오래 사용하지 않았고, 아마도 이 접근 방식을 사용하지 않을 좋은 이유가 있을 수 있지만, 공유하는 것이 낫다고 생각했습니다.

언급URL : https://stackoverflow.com/questions/11050269/fixed-width-buttons-with-bootstrap