단추를 풀 너비로 설정하시겠습니까?

단추를 풀 너비로 설정하시겠습니까?

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

<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그게 일입니까?

<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^ 섹션에서 자세히 알아보십시오.

부트스트랩 / CSS

사용하다col-12,btn-block,w-100,form-control또는width:100%

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

         <button class="btn btn-success col-12">
             class="col-12"
         </button>
    
         <button class="btn btn-primary w-100">
             class="w-100"
         </button>

         <button class="btn btn-secondary btn-block">
             class="btn-block"
         </button>
         
         <button class="btn btn-success form-control">
             class="form-control"
         </button>
         
         <button class="btn btn-danger" style="width:100%">
             style="width:100%"
         </button>

누군가가 눈치채고 있는 경우btn-block부트스트랩 5.1+에서 더 이상 작동하지 않음:

부트스트랩 5.1(변경 로그)에서 삭제되었습니다.

유틸리티에 대해 삭제된 .btn-block을 차단하는 중입니다..btn에서 .btn-block을 사용하는 대신 버튼을 .d-grid 및 .gap-* 유틸리티로 감싸서 필요에 따라 공백을 만듭니다.대응하는 클래스로 전환하여 클래스를 더욱 효과적으로 제어할 수 있습니다.몇 가지 예를 보려면 문서를 읽으십시오.

클래스를 추가하여 단추 전체 너비를 만들 수 있습니다.w-100작성자가 공식 가격 예제 페이지에서 수행하는 것처럼:

<button type="button" class="w-100 btn btn-lg btn-outline-primary">
    Sign up for free
</button>

출처: https://getbootstrap.com/docs/5.1/examples/pricing/

차단 단추를 쌓으려면 공식 문서에서 다음을 권장합니다.

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

출처: https://getbootstrap.com/docs/5.1/components/buttons/ #block-filename

저는 이것을 간단히 사용했습니다.

<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</button>
</div>

사용하다

<div class="btn-group btn-group-justified">
  ...
</div>

그러나 <a> 요소에만 작동하고 <버튼> 요소에는 작동하지 않습니다.

참조: http://getbootstrap.com/components/ #btn-groups-message

이러한 스타일을 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% 확신할 수 없지만, 저는 이것이 당신에게 가까워질 것이라고 생각합니다.

부트스트랩 5에서 클래스는btn-block더 이상 작동하지 않습니다.대신 클래스를 추가할 수 있습니다.w-100버튼으로 이동하여 용기만큼 폭을 넓힙니다.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row"><div class=" col-5 ">
            <a class="btn btn-outline-primary w-100  " href="# "><span>Button 1</span></a> 
</div><div class="col-5 ">

            <a class=" btn btn-primary w-100 weiss " href="# "><span>Button 2</span></a> 
</div></div>

저는 이것이 가장 부트스트랩 같은 방식일 것이라고 생각했을 것입니다.

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

2022년 업데이트:

단추를 전체 너비로 만드는 방법은 여러 가지가 있습니다.

1. 추가할 수 있습니다.w-100학급에
2. 추가할 수 있습니다.d-grid그리고.gap-2버튼 위에 있는 컨테이너로:

<div class="d-grid gap-2"> <!-- Here -->
  <button class="btn btn-primary" type="button">Button</button>
</div>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

         <button class="btn btn-success col-12">
             class="col-12"
         </button>
    
         <button class="btn btn-primary w-100">
             class="w-100"
         </button>

         <button class="btn btn-secondary btn-block">
             class="btn-block"
         </button>
         
         <button class="btn btn-success form-control">
             class="form-control"
         </button>
         
         <button class="btn btn-danger" style="width:100%">
             style="width:100%"
         </button>

1. 블록 레벨 전체 너비 버튼을 사용할 수 있습니다.

2. .btn-block을 추가하여 부모 너비 전체에 걸쳐 있는 블록 수준 단추를 만듭니다.

   <button type="button" class="btn btn-primary btn-lg btn-block">
      Block level button
   </button>
   
   <button type="button" class="btn btn-secondary btn-lg btn-block">
      Block level button
   </button>
   

당신은 간단히 css 속성을 사용할 수 있습니다.width: 100%:

<button style="width: 100%;">Test Button</button>

언급URL : https://stackoverflow.com/questions/12061139/making-button-go-full-width