열의 전체 너비를 차지하는 버튼을 원하지만 어려움이 있습니다 …
<div class="span9 btn-block">
<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div>
단추를 열만큼 넓게 만들려면 어떻게합니까?
답변
부트 스트랩 v3 및 v4
btn-block
버튼 / 요소에서 수업 사용
부트 스트랩 v2
input-block-level
버튼 / 요소에서 수업 사용
답변
왜 input-block-level
작업을 수행하는 Bootstrap 사전 정의 클래스 를 사용하지 않습니까?
<a href="#" class="btn input-block-level">Full-Width Button</a> <!-- BS2 -->
<a href="#" class="btn form-control">Full-Width Button</a> <!-- BS3 -->
<!-- And let's join both for BS# :) -->
<a href="#" class="btn input-block-level form-control">Full-Width Button</a>
Control Sizing ^ 섹션 에서 자세히 알아보십시오 .
답변
나는 이것을 간단히 사용했다.
<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</button>
</div>
답변
부트 스트랩 4.1 이상
사용 col-12
, btn-block
, w-100
또는form-control
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row no-gutters">
<div class="col">
<button class="btn btn-success col-12">
class="col-12"
</button>
</div>
</div>
<br>
<div class="row no-gutters">
<div class="col">
<button class="btn btn-primary w-100">
class="w-100"
</button>
</div>
</div>
<br>
<div class="row no-gutters">
<div class="col">
<button class="btn btn-secondary btn-block">
class="btn-block"
</button>
</div>
</div>
<br>
<div class="row no-gutters">
<div class="col">
<button class="btn btn-success form-control">
class="form-control"
</button>
</div>
</div>
<br>
<div class="row no-gutters">
<div class="col">
<button class="btn btn-danger" style="width:100%">
style="width:100%"
</button>
</div>
</div>
답변
사용하다
<div class="btn-group btn-group-justified">
...
</div>
그러나 <button> 요소가 아닌 <a> 요소에만 작동합니다.
참조 : http://getbootstrap.com/components/#btn-groups-justified
답변
이 스타일을 CSS 시트에 추가해야합니다
div .no-padding {
padding:0;
}
button .full-width{
width:100%;
//display:block; //only if you're having issues
}
그런 다음 코드에 클래스 추가를 변경하십시오.
<div class="span9 btn-block no-padding">
<button class="btn btn-large btn-block btn-primary full-width" type="button">Block level button</button>
</div>
나는 이것을 테스트하지 않았으며 원하는 것을 100 % 확신하지 못하지만 이것이 당신을 가까이 할 것이라고 생각합니다.
답변
나는 이것이 가장 부트 스트랩 방식의 일이라고 생각했을 것입니다.
<button type='button' class='btn btn-success col-xs-12'> First buttton baby </button>
내가하고있는 일은 col-xs-12
버튼에 수업 을 추가하는 것 입니다.