버튼을 전체 너비로 사용 하시겠습니까?

열의 전체 너비를 차지하는 버튼을 원하지만 어려움이 있습니다 ...

<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버튼에 수업 을 추가하는 것 입니다.

<div class="col-md-9">
    <button class="btn btn-block btn-primary" type="button">Block level button</button>
</div>

부트 스트랩 3에서는 이것이 전부 필요합니다. btn-large너비를 재정의하고 있다고 생각 btn-block합니다.

버튼의 너비는 버튼 텍스트로 정의됩니다. 따라서 버튼의 너비를 정의하려면 CSS의 픽셀을 사용하거나 백분율 값을 반응 적으로 사용하여 정의 된 너비를 사용할 수 있습니다.