Làm nút đi toàn chiều rộng?

Tôi muốn một nút để chiếm toàn bộ chiều rộng của cột, nhưng gặp khó khăn ...

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

Làm cách nào để làm cho nút rộng bằng cột?

Bootstrap v3 & v4

Sử dụng btn-blocklớp trên nút / phần tử của bạn

Bootstrap v2

Sử dụng input-block-levellớp trên nút / phần tử của bạn

Tại sao không sử dụng lớp Bootstrap được xác định trước input-block-levelmà thực hiện công việc?

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

Tìm hiểu thêm ở đây trong phần Điều khiển kích thước ^ .

Tôi chỉ đơn giản là sử dụng điều này:

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

sử dụng col-12, btn-block, w-100hoặcform-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>

sử dụng

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

nhưng nó chỉ hoạt động cho các phần tử <a> chứ không phải <button>.

xem: http://getbootstrap.com/components/#btn-groups-justified

Bạn nên thêm các kiểu này vào một bảng CSS

div .no-padding {
  padding:0;
}

button .full-width{
  width:100%;
  //display:block; //only if you're having issues
}

Sau đó thay đổi thêm các lớp vào mã của bạn

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

Tôi chưa thử nghiệm điều này và tôi không chắc chắn 100% những gì bạn muốn, nhưng tôi nghĩ rằng điều này sẽ giúp bạn gần gũi.

Tôi đã nghĩ rằng đây sẽ là cách làm bootstrap-esque nhất:

<button type='button' class='btn btn-success col-xs-12'> First buttton baby </button>

Tất cả những gì tôi đang làm là thêm lớp col-xs-12vào nút.

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

Trong Bootstrap 3, đây sẽ là tất cả những gì bạn cần. Tôi tin rằng btn-largeđã vượt qua chiều rộng của btn-block.

Độ rộng của nút được xác định bởi văn bản nút. Vì vậy, nếu bạn muốn xác định chiều rộng của nút, bạn có thể sử dụng chiều rộng được xác định bằng cách sử dụng pixel trong css hoặc nếu bạn muốn bằng phản hồi, hãy sử dụng giá trị phần trăm.