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?


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


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


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>

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>



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.


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.


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.


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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.