Fazendo o botão ficar com largura total?

276

Quero um botão para ocupar toda a largura da coluna, mas com dificuldades ...

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

Como faço para tornar o botão tão largo quanto a coluna?

css twitter-bootstrap html responsive-design user1438003
fonte
2
Qual coluna? Onde está o CSS?
21412 JJJ
Então, eu estou usando o Twitter-bootstrap
user1438003
1
Você já tentou style="width:100%"? Ou colocar isso em uma de suas aulas?
Lee Taylor
2
Talvez porque tenha alguma margem ou a coluna tenha algum preenchimento.
Ohad
4
A btn-blockclasse funciona para mim como você espera em BS3
fguillen

Respostas:

826

Bootstrap v3 e v4

Use btn-blockclasse no seu botão / elemento

Bootstrap v2

Use input-block-levelclasse no seu botão / elemento

Layke
fonte
13
Para grupos de botões, você precisará adicionar btn-blockao btn-groupwrapper também.
Jesse
1
testado com V3 bootstrap e "btn-block" funcionou para mim
Buddhika Alwis
eu estou usando o mesmo, mas não expande <div class = "btn-group"> <button id = "btnSearch" class = "btn-block"> Pesquisa </button> </div>
Samra
Cheers companheiro! esta deve ser a resposta
Nicholas
39

Por que não usar a classe predefinida Bootstrap input-block-levelque faz o trabalho?

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

Saiba mais aqui na seção Control Sizing ^ .

CodeAngry
fonte
2
@fguillen Nãoform-control estou mais usando BS, mas tente a aula. Parece tornar as coisas 100% de largura nas amostras.
CodeAngry
@ CodeAngry apenas curioso, por que você não está mais usando BS (além da possível raiva do código;)?
K. Kilian Lindberg
2
@CarlLindberg eu rolei o meu! BS é bom para uma rápida recuperação, mas ... não se destaca.
CodeAngry
1
@ Codeode irritado, isso é legal, você criou sua própria estrutura - mas pode valer a pena usar o rolo de tema - de qualquer maneira, adereços para fazer suas próprias coisas!
Cody
A partir do bs4, a resposta de @Layke parece mais atualizada e abrange os bs 2, 3 e 4. Nenhuma das opções acima fez algo útil para mim no bs4. Peça desculpas por estar conversando com isso, mas a resposta aceita não parece uma boa ideia e esta parece preterida.
JL Peyret
26

Eu simplesmente usei isso:

<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
Esta é a maneira de fazer isso com o btn-lg. controle de forma não funciona.
22868 Mark Swardstrom
14

Bootstrap 4.1 ou superior

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

WasiF
fonte
12

usar 

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

mas funciona apenas para elementos <a> e não para <button>.

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

noel
fonte
1
A pergunta era sobre botões e não btn-groups, há uma resposta mais aceita referente à btn-blockclasse de Layke.
Hans
9

Você deve adicionar esses estilos a uma folha CSS

div .no-padding {
  padding:0;
}

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

Em seguida, altere adicionar as classes ao seu código

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

Eu não testei isso e não tenho 100% de certeza do que você deseja, mas acho que isso o aproximará.

Kenny Bania
fonte
Corrigi um erro de digitação no meu código, deveria ter sido div em vez de span na entrada superior do css. Você pode confirmar que os estilos estão sendo aplicados? A largura do botão é alterada?
precisa saber é o seguinte
6
btn-blocké o atributo que me salvou! Estava puxando meu cabelo para fora .. Agora eu voltar e procurar twitter.github.io/bootstrap/base-css.html#buttons , esse atributo foi documentado lá - dó;)
GONeale
6

Eu pensaria que essa seria a maneira mais simples de fazer as coisas:

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

Tudo o que estou fazendo é adicionar a classe col-xs-12ao botão.

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

No Bootstrap 3, isso deve ser tudo o que você precisa. Eu acredito que btn-largeestava substituindo a largura de btn-block.

kim3er
fonte
1

A largura do botão é definida pelo texto do botão. Portanto, se você deseja definir a largura do botão, pode usar uma largura definida usando pixel no css ou, se desejar, responsivo, use um valor percentual.

skoepp
fonte