Düğme tam genişlikte mi yapılıyor?

276

Sütunun tüm genişliğini almak için bir düğme istiyorum, ama zorlanıyorum ...

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

Düğmeyi sütun kadar geniş hale nasıl getirebilirim?

— user1438003
kaynak

2

Hangi sütun? CSS nerede?

— JJJ

Bu yüzden Twitter-bootstrap

— user1438003

1

Denedin style="width:100%"mi Yoksa bunu sınıflarınızdan birine mi koydunuz?

— Lee Taylor

2

Bunun nedeni, bir miktar marjı olması veya sütunun biraz dolgusu olması olabilir.

— Ohad

4

btn-blockBeklediğiniz gibi sınıf BS3 içinde benim için çalışıyor

— fguillen

826

Bootstrap v3 ve v4

Düğmenizde btn-block/ öğenizde sınıf kullanma

Bootstrap v2

Düğmenizde input-block-level/ öğenizde sınıf kullanma

— Layke
kaynak

13

Düğme grupları btn-blockiçin btn-groupsarmalayıcıya da eklemeniz gerekir .

— Jesse

1

bootstrap V3 ile test edildi ve "btn-block" benim için çalıştı

— Buddhika Alwis

aynı kullanıyorum ama genişletmiyorum <div class = "btn-group"> <button id = "btnSearch" class = "btn-block"> Arama </button> </div>

— Samra

Şerefe arkadaşlar! bu cevap olmalı

— Nicholas

39

Neden input-block-levelişi yapan Bootstrap önceden tanımlanmış sınıfı kullanmıyorsunuz ?

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

Daha fazla bilgiyi Control Boyutlandırma ^ bölümünde bulabilirsiniz.

— CodeAngry
kaynak

2

@fguillen Artık BS kullanmıyorum ama form-controlsınıfı deneyin . Örneklerde% 100 genişlikte şeyler yapıyor gibi görünüyor.

— CodeAngry

@CodeAngry sadece merak, nasıl artık BS kullanmıyorsunuz (olası kod öfke yanında;)?

— K. Kilian Lindberg

2

@CarlLindberg Kendime baktım! BS hızlı bir geri dönüş için iyi ama ... göze çarpmıyor.

— CodeAngry

1

@CodeAngry, Kendi çerçevenizi yuvarladığınız harika - ama tema silindiri kullanmaya değebilir - her iki durumda da, kendi işinizi yapmaya devam edin!

— Cody

Bs4'ten itibaren, @Layke'nin cevabı daha güncel görünüyor ve bs 2, 3 ve 4'ü kapsıyor. Yukarıdaki seçeneklerden hiçbiri bs4'te benim için yararlı bir şey yapmadı. Bununla konuştuğunuz için özür dileriz, ancak kabul edilen cevap iyi bir fikir gibi görünmüyor ve bu cevap reddediliyor.

— JL Peyret

26

Ben sadece bunu kullandım:

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

1

Btn-lg ile yapmanın yolu budur. form denetimi çalışmıyor.

— Mark Swardstrom

14

Bootstrap 4.1+

kullanımı col-12, btn-block, w-100ya daform-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>

Snippet'i genişlet

— Wasif
kaynak

12

kullanım

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

ancak yalnızca <a> öğeleri için çalışır, <düğmesi> öğeleri için geçerli değildir.

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

— Noel
kaynak

1

Soru, düğmeler değil btn-groups btn-blockile ilgiliydi, Layke tarafından sınıfa atıfta bulunan daha kabul edilmiş bir yanıt var .

— Hans

9

Bu stilleri bir CSS sayfasına eklemelisiniz

div .no-padding {
  padding:0;
}

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

Ardından sınıfları kodunuza ekleyin

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

Bunu test etmedim ve ne istediğinden% 100 emin değilim, ama bunun seni yakınlaştıracağını düşünüyorum.

— Kenny Bania
kaynak

Kodumda bir yazım hatası düzeltildi, üst css girişinde span yerine div olması gerekirdi. Stillerin uygulandığını onaylayabilir misiniz? Düğmenin genişliği hiç değişiyor mu?

— Kenny Bania

6

btn-blockbeni kurtaran özellik! Saçımı çekerek .. Şimdi ben geri dönüp arama oldu twitter.github.io/bootstrap/base-css.html#buttons , o özellik var belgelendi - doh;)

— GONeale

6

Bunun bir şeyler yapmanın en bootstrap esque yolu olacağını düşünürdüm:

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

Tek yaptığım col-xs-12düğmeyi sınıfı eklemek .

— Çırılçıplak
kaynak

5

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

Bootstrap 3'te ihtiyacınız olan her şey bu olmalıdır. btn-largeGenişliğini geçersiz kıldığına inanıyorum btn-block.

— kim3er
kaynak

1

Düğmenin genişliği düğme metni ile tanımlanır. Bu nedenle, düğmenin genişliğini tanımlamak istiyorsanız, css'de piksel kullanarak veya duyarlı bir şekilde bir yüzde değeri kullanarak tanımlanmış bir genişlik kullanabilirsiniz.

— skoepp
kaynak