ปุ่มทำให้กว้างเต็มหรือไม่

ฉันต้องการปุ่มที่จะใช้ความกว้างเต็มของคอลัมน์ แต่มีปัญหา ...

<div class="span9 btn-block">
    <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div>

ฉันจะทำให้ปุ่มกว้างเท่ากับคอลัมน์ได้อย่างไร

Bootstrap v3 & v4

ใช้btn-blockคลาสบนปุ่ม / องค์ประกอบของคุณ

Bootstrap v2

ใช้input-block-levelคลาสบนปุ่ม / องค์ประกอบของคุณ

ทำไมไม่ใช้คลาสที่กำหนดไว้ล่วงหน้า Bootstrap 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>

เรียนรู้เพิ่มเติมที่นี่ในการกำหนดขนาดการควบคุม ^ส่วน

ฉันแค่ใช้สิ่งนี้:

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

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

แต่ใช้งานได้เฉพาะกับองค์ประกอบ <a> ไม่ใช่องค์ประกอบ <button>

ดู: 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>

ใน Bootstrap 3 นี่คือสิ่งที่คุณต้องการ ผมเชื่อว่าการได้รับการเอาชนะความกว้างของbtn-largebtn-block

ความกว้างของปุ่มถูกกำหนดโดยข้อความของปุ่ม ดังนั้นหากคุณต้องการกำหนดความกว้างของปุ่มคุณสามารถใช้ความกว้างที่กำหนดโดยใช้พิกเซลใน css หรือถ้าคุณต้องการตอบสนองโดยใช้ค่าร้อยละ