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?

— 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

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