¿Hacer que el botón vaya de ancho completo?

276

Quiero un botón para ocupar todo el ancho de la columna, pero tengo dificultades ...

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

¿Cómo hago que el botón sea tan ancho como la columna?

css twitter-bootstrap html responsive-design usuario1438003
fuente
2
Que columna ¿Dónde está el CSS?
JJJ
Así que estoy usando Twitter-bootstrap
user1438003
1
¿Lo has intentado style="width:100%"? ¿O poner eso en una de tus clases?
Lee Taylor
2
Quizás sea porque tiene cierto margen o la columna tiene algo de relleno.
Ohad
44
La btn-blockclase funciona para mí como esperas en BS3
fguillen

Respuestas:

826

Bootstrap v3 y v4

Usa la btn-blockclase en tu botón / elemento

Bootstrap v2

Usa la input-block-levelclase en tu botón / elemento

Layke
fuente
13
Para los grupos de botones, también deberá agregar btn-blockal btn-groupcontenedor.
Jesse
1
probado con Bootstrap V3 y "btn-block" funcionó para mí
Buddhika Alwis
estoy usando lo mismo pero no expande <div class = "btn-group"> <button id = "btnSearch" class = "btn-block"> Buscar </button> </div>
Samra
¡Salud! esta debe ser la respuesta
Nicholas
39

¿Por qué no utilizar la clase predefinida Bootstrap input-block-levelque hace el trabajo?

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

Obtenga más información aquí en la sección Control Sizing ^ .

CodeAngry
fuente
2
@fguillen Ya no usa BS pero prueba la form-controlclase. Parece hacer que las cosas sean 100% anchas en las muestras.
CodeAngry
@CodeAngry solo es curioso, ¿cómo es que ya no estás usando BS (además del posible enojo del código;)?
K. Kilian Lindberg
2
@CarlLindberg ¡Rodé el mío! BS es bueno para un cambio rápido pero ... no se destaca.
CodeAngry
1
@CodeAngry, es genial que hayas creado tu propio marco, pero puede valer la pena usar el tema-rodillo, de cualquier manera, ¡apoyarse en hacer lo tuyo!
Cody
A partir de bs4, la respuesta de @Layke parece más actualizada y cubre bs 2, 3 y 4. Ninguna de las opciones anteriores me sirvió de nada en bs4. Discúlpate por ser hablador con esto, pero la respuesta aceptada no parece una buena idea y esta parece obsoleta.
JL Peyret
26

Simplemente usé esto:

<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
fuente
1
Esta es la forma de hacerlo con btn-lg. el control de forma no funciona.
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>
Expandir fragmento

WasiF
fuente
12

utilizar 

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

pero solo funciona para elementos <a> y no para elementos <button>.

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

Navidad
fuente
1
La pregunta era sobre botones no btn-groups, hay una respuesta más aceptada que se refiere a la btn-blockclase de Layke.
Hans
9

Debe agregar estos estilos a una hoja CSS

div .no-padding {
  padding:0;
}

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

Luego cambie, agregue las clases a su 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>

No he probado esto y no estoy 100% seguro de lo que quieres, pero creo que esto te acercará.

Kenny Bania
fuente
Corregí un error tipográfico en mi código, debería haber sido div en lugar de span en la entrada css superior. ¿Puedes confirmar que los estilos se están aplicando? ¿Cambia el ancho del botón?
Kenny Bania
66
btn-blockes el atributo que me salvó! Me estaba arrancando el pelo ... Ahora vuelvo y busco twitter.github.io/bootstrap/base-css.html#buttons , ese atributo se documentó allí - doh;)
GONeale
6

Pensé que esta sería la forma más esquemática de hacer las cosas:

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

Todo lo que estoy haciendo es agregar la clase col-xs-12 al botón.

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

En Bootstrap 3, esto debería ser todo lo que necesitas. Creo que btn-largeestaba anulando el ancho de btn-block.

kim3er
fuente
1

El ancho del botón está definido por el texto del botón. Entonces, si desea definir el ancho del botón, puede usar un ancho definido mediante el uso de píxeles en el CSS o, si lo desea, utilice un valor de porcentaje.

skoepp
fuente