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?


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


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


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>

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>



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


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.


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.


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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.