Czy przycisk ma pełną szerokość?

276

Chcę, aby przycisk zajmował całą szerokość kolumny, ale mam trudności ...

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

Jak ustawić przycisk tak szeroki, jak kolumna?

css twitter-bootstrap html responsive-design użytkownik 1438003
źródło
2
Jaka kolumna? Gdzie jest CSS?
JJJ
Więc używam Twitter-bootstrap
user1438003
1
Próbowałeś style="width:100%"? Czy umieszczenie tego na jednej z twoich zajęć?
Lee Taylor,
2
Może dlatego, że ma margines lub kolumnę ma wypełnienie.
Ohad,
4
btn-blockKlasa działa na mnie jak można się spodziewać w BS3
fguillen

Odpowiedzi:

826

Bootstrap v3 i v4

Użyj btn-blockklasy na swoim przycisku / elemencie

Bootstrap v2

Użyj input-block-levelklasy na swoim przycisku / elemencie

Layke
źródło
13
W przypadku grup przycisków należy również dodać btn-blockdo btn-groupopakowania.
Jesse
1
przetestowane z bootstrapem V3 i „btn-block” zadziałało dla mnie
Buddhika Alwis
używam tego samego, ale nie rozwijam <div class = "btn-group"> <button id = "btnSearch" class = "btn-block"> Szukaj </button> </div>
Samra
Zdrowie przyjacielu! to musi być odpowiedź
Nicholas
39

Dlaczego nie użyć wstępnie zdefiniowanej klasy Bootstrap, input-block-levelktóra wykonuje to zadanie?

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

Dowiedz się więcej tutaj w sekcji Control Sizing ^ .

CodeAngry
źródło
2
@fguillen Nie używam już BS, ale wypróbuj form-controlklasę. Wygląda na to, że robi próbki w 100% szerokie w próbkach.
CodeAngry
@ CodeAngry po prostu ciekawi, dlaczego nie używasz już BS (poza możliwym gniewem kodu;)?
K. Kilian Lindberg,
2
@CarlLindberg Walcowałem własne! BS jest dobre na szybki zwrot, ale ... nie wyróżnia się.
CodeAngry
1
@CodeAngry, Fajnie, że stworzyłeś własną platformę - ale warto użyć rolki motywu - tak czy inaczej, rekwizyty na robienie własnych rzeczy!
Cody
Począwszy od bs4, odpowiedź @Layke wydaje się bardziej aktualna i obejmuje bs 2, 3 i 4. Żadna z powyższych opcji nie przydała mi się na bs4. Przepraszam za rozmowę z tym, ale zaakceptowana odpowiedź nie wydaje się dobrym pomysłem, a ta wydaje się przestarzała.
JL Peyret,
26

Po prostu użyłem tego:

<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
źródło
1
W ten sposób można to zrobić za pomocą btn-lg. Form-Control nie działa.
Mark Swardstrom
14

Bootstrap 4.1+

Zastosowanie col-12, btn-block, w-100lubform-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>
Rozwiń fragment kodu

WasiF
źródło
12

posługiwać się 

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

ale działa tylko w przypadku elementów <a>, a nie elementów <button>.

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

kolęda
źródło
1
Pytanie dotyczyło nie przycisków btn-group, istnieje bardziej akceptowana odpowiedź odnosząca się do btn-blockklasy autorstwa Layke.
Hans,
9

Powinieneś dodać te style do arkusza CSS

div .no-padding {
  padding:0;
}

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

Następnie zmień dodaj klasy do swojego kodu

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

Nie testowałem tego i nie jestem w 100% pewien, czego chcesz, ale myślę, że to cię zbliży.

Kenny Bania
źródło
Poprawiłem literówkę w kodzie, powinienem być div zamiast span w górnym wpisie css. Czy możesz potwierdzić, że style są stosowane? Czy szerokość przycisku w ogóle się zmienia?
Kenny Bania,
6
btn-blockto atrybut, który mnie uratował!
Wyciągałam
6

Pomyślałbym, że byłby to najbardziej praktyczny sposób robienia rzeczy:

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

Wszystko, co robię, to dodawanie klasy col-xs-12do przycisku.

Starkers
źródło
5 
<div class="col-md-9">
    <button class="btn btn-block btn-primary" type="button">Block level button</button>
</div>

W Bootstrap 3 powinno to być wszystko, czego potrzebujesz. Myślę, że btn-largeprzesłonił szerokość btn-block.

kim3er
źródło
1

Szerokość przycisku jest określona przez tekst przycisku. Więc jeśli chcesz zdefiniować szerokość przycisku, możesz użyć zdefiniowanej szerokości, używając piksela w css lub jeśli chcesz, reagując, użyj wartości procentowej.

skoepp
źródło