[css] 부트 스트랩이있는 고정 너비 버튼
부트 스트랩은 고정 너비 버튼을 지원합니까? 현재 “저장”및 “다운로드”버튼이 두 개인 경우 버튼 크기는 내용에 따라 변경됩니다.
또한 부트 스트랩을 확장하는 올바른 방법은 무엇입니까?
답변
.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>답변
이렇게하려면 두 버튼에 모두 맞는 너비를 찾은 다음 너비가있는 사용자 정의 클래스를 만들고 버튼에 다음과 같이 추가하십시오.
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을 적용하여 버튼이 부모 컨테이너의 전체 너비를 차지할 수 있습니다.
답변
@ 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);
