Membuat tombol menjadi lebar penuh?

276

Saya ingin tombol untuk mengambil lebar penuh kolom, tetapi mengalami kesulitan ...

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

Bagaimana cara membuat tombol selebar kolom?

css twitter-bootstrap html responsive-design pengguna1438003
sumber
2
Kolom apa? Di mana CSS?
JJJ
Jadi saya menggunakan Twitter-bootstrap
user1438003
1
Sudahkah Anda mencoba style="width:100%"? Atau menempatkan itu di salah satu kelas Anda?
Lee Taylor
2
Itu mungkin karena memiliki margin atau kolom memiliki padding.
Ohad
4
The btn-blockkelas bekerja untuk saya seperti yang Anda harapkan di BS3
fguillen

Jawaban:

826

Bootstrap v3 & v4

Gunakan btn-blockkelas pada tombol / elemen Anda

Bootstrap v2

Gunakan input-block-levelkelas pada tombol / elemen Anda

Layke
sumber
13
Untuk grup tombol, Anda juga perlu menambahkan btn-blockke btn-grouppembungkus.
Jesse
1
diuji dengan bootstrap V3 dan "btn-block" bekerja untuk saya
Buddhika Alwis
saya menggunakan yang sama tetapi tidak memperluas <div class = "btn-group"> <button id = "btnSearch" class = "btn-block"> Cari </button> </div>
Samra
Salut kawan! ini pasti jawabannya
Nicholas
39

Mengapa tidak menggunakan kelas input-block-levelyang telah ditentukan Bootstrap yang melakukan pekerjaan?

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

Pelajari lebih lanjut di sini di bagian Kontrol Ukuran ^ .

CodeAngry
sumber
2
@ fguillen Tidak menggunakan BS lagi tetapi coba form-controlkelas. Tampaknya membuat hal-hal 100% lebar dalam sampel.
CodeAngry
@CodeAngry hanya ingin tahu, kenapa Anda tidak menggunakan BS lagi (selain kemungkinan kode kemarahan;)?
K. Kilian Lindberg
2
@CarlLindberg saya menggulung sendiri! BS bagus untuk perputaran cepat tapi ... itu tidak menonjol.
CodeAngry
1
@CodeAngry, Itu keren Anda menggulung kerangka Anda sendiri - tetapi mungkin layak untuk menggunakan roller-tema - cara baik, alat peraga pada melakukan hal Anda sendiri!
Cody
Pada bs4, jawaban @Layke tampaknya lebih terkini dan mencakup bs 2, 3 dan 4. Tidak ada opsi di atas yang melakukan sesuatu yang berguna bagi saya di bs4. Minta maaf karena cerewet dengan ini, tetapi jawaban yang diterima tampaknya bukan ide yang bagus dan yang ini tampaknya sudah usang.
JL Peyret
26

Saya hanya menggunakan ini:

<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</button>
</div>
syn
sumber
1
Ini adalah cara untuk melakukannya dengan btn-lg. bentuk-kontrol tidak berfungsi.
Mark Swardstrom
14

Bootstrap 4.1+

penggunaan col-12, btn-block, w-100atauform-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>
Luaskan cuplikan

WasiF
sumber
12

menggunakan 

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

tetapi hanya berfungsi untuk <a> elemen dan bukan elemen <button>.

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

Noel
sumber
1
Pertanyaannya adalah tentang tombol bukan btn-group, ada respons yang lebih diterima merujuk ke btn-blockkelas oleh Layke.
Hans
9

Anda harus menambahkan gaya ini ke lembar CSS

div .no-padding {
  padding:0;
}

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

Kemudian ubah tambahkan kelas ke kode Anda

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

Saya belum menguji ini dan saya tidak 100% yakin apa yang Anda inginkan, tapi saya pikir ini akan membuat Anda dekat.

Kenny Bania
sumber
Saya mengoreksi kesalahan ketik dalam kode saya, seharusnya div bukan rentang dalam entri css atas. Bisakah Anda mengonfirmasi gaya yang diterapkan? Apakah lebar tombol berubah sama sekali?
Kenny Bania
6
btn-blockadalah atribut yang menyelamatkan saya! Mencabut rambut saya .. Sekarang saya kembali dan mencari twitter.github.io/bootstrap/base-css.html#buttons , atribut itu didokumentasikan di sana - doh;)
GONeale
6

Saya akan berpikir ini akan menjadi cara bootstrap-esque yang paling banyak dalam melakukan sesuatu:

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

Yang saya lakukan adalah menambahkan kelas col-xs-12ke tombol.

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

Di Bootstrap 3, ini yang Anda butuhkan. Saya percaya btn-largeitu menimpa lebar btn-block.

Kim3er
sumber
1

Lebar tombol ditentukan oleh teks tombol. Jadi jika Anda ingin menentukan lebar tombol, Anda dapat menggunakan lebar yang ditentukan dengan menggunakan piksel dalam css atau jika Anda ingin secara responsif menggunakan nilai persentase.

skoepp
sumber