Far passare il pulsante a tutta larghezza?

276

Voglio un pulsante per occupare l'intera larghezza della colonna, ma avendo difficoltà ...

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

Come faccio a rendere il pulsante largo quanto la colonna?

— user1438003
fonte

2

Quale colonna? Dov'è il CSS?

— JJJ

Quindi sto usando Twitter-bootstrap

— user1438003

1

Ci hai provato style="width:100%"? O metterlo in una delle tue lezioni?

— Lee Taylor,

2

Questo forse perché ha qualche margine o la colonna ha qualche imbottitura.

— Ohad,

4

La btn-blocklezione funziona per me come previsto in BS3

— fguillen,

826

Bootstrap v3 e v4

Usa la btn-blockclasse sul tuo pulsante / elemento

Bootstrap v2

Usa la input-block-levelclasse sul tuo pulsante / elemento

— Layke
fonte

13

Per i gruppi di pulsanti dovrai aggiungere anche btn-blockal btn-groupwrapper.

— Jesse,

1

testato con bootstrap V3 e "btn-block" ha funzionato per me

— Buddhika Alwis

sto usando lo stesso ma non si espande <div class = "btn-group"> <button id = "btnSearch" class = "btn-block"> Cerca </button> </div>

— Samra

Saluti amico! questa deve essere la risposta

— Nicholas

39

Perché non usare la classe predefinita Bootstrap input-block-levelche fa il lavoro?

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

Scopri di più qui nella sezione Dimensionamento del controllo ^ .

— CodeAngry
fonte

2

@fguillen Non usi più BS ma prova la form-controllezione. Sembra rendere le cose larghe al 100% nei campioni.

— CodeAngry

@CodeAngry solo curioso, come mai non usi più BS (oltre alla possibile rabbia del codice;)?

— K. Kilian Lindberg,

2

@CarlLindberg Ho fatto il mio! BS è buono per una rapida inversione di tendenza ma ... non si distingue.

— CodeAngry

1

@CodeAngry, è bello che tu abbia realizzato il tuo framework - ma potrebbe valere la pena usare il tema del rullo - in entrambi i casi, puntelli per fare le tue cose!

— Cody,

A partire da bs4, la risposta di @Layke sembra più aggiornata e copre bs 2, 3 e 4. Nessuna delle opzioni precedenti ha fatto nulla di utile per me su bs4. Chiedere scusa per essere loquace con questo, ma la risposta accettata non sembra una buona idea e questa sembra deprecata.

— JL Peyret,

26

Ho semplicemente usato questo:

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

1

Questo è il modo di farlo con btn-lg. il controllo della forma non funziona.

— Mark Swardstrom,

14

Bootstrap 4.1+

uso col-12, btn-block, w-100oform-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>

Espandi frammento

— Wasif
fonte

12

uso

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

ma funziona solo per <a> elementi e non per <button> elementi.

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

— noel
fonte

1

La domanda riguardava i pulsanti non btn-groups, c'è una risposta più accettata in riferimento alla btn-blockclasse di Layke.

— Hans,

9

È necessario aggiungere questi stili a un foglio CSS

div .no-padding {
  padding:0;
}

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

Quindi modifica aggiungi le classi al tuo codice

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

Non l'ho provato e non sono sicuro al 100% di quello che vuoi, ma penso che questo ti avvicinerà.

— Kenny Bania
fonte

Ho corretto un refuso nel mio codice, avrebbe dovuto essere div anziché span nella voce css in alto. Puoi confermare che gli stili sono stati applicati? La larghezza del pulsante cambia affatto?

— Kenny Bania,

6

btn-blockè l'attributo che mi ha salvato! Mi stavo togliendo i capelli .. Ora torno indietro e cerco twitter.github.io/bootstrap/base-css.html#buttons ,

— quell'attributo è

6

Avrei pensato che questo sarebbe il modo più semplice di fare le cose:

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

Tutto quello che sto facendo è aggiungere la classe col-xs-12al pulsante.

— starkers
fonte

5

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

In Bootstrap 3, questo dovrebbe essere tutto ciò di cui hai bisogno. Credo che btn-largestava scavalcando la larghezza di btn-block.

— kim3er
fonte

1

La larghezza del pulsante è definita dal testo del pulsante. Quindi, se si desidera definire la larghezza del pulsante, è possibile utilizzare una larghezza definita utilizzando pixel nel CSS o se si desidera rispondere in modo reattivo utilizzare un valore percentuale.

— skoepp
fonte