css - para - ¿Haciendo el botón ir de ancho completo?

crear botones en html y css

Question

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 el botón tan ancho como la columna?

Answer 1

Bootstrap v3 y v4

Usa la clase btn-block en tu botón / elemento

Bootstrap v2

Use la clase de input-block-level en su botón / elemento

Answer 2

Debe agregar estos estilos a una hoja de CSS

div .no-padding {
  padding:0;
}

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

Luego cambia agrega las clases a tu 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á.

Answer 3

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 usando un píxel en el css o si quiere usar un valor de porcentaje con capacidad de respuesta.

Answer 4

Pensé que esta sería la forma más sencilla 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.

Answer 5

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>

Answer 6

utilizar

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

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

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

Answer 7

¿Por qué no usar la clase predefinida Bootstrap a nivel input-block-level que 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 de tamaño ^

Answer 8

Bootstrap-4

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-success col-12">
             Button
         </button>
     </div>
</div>

Answer 9

<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-large estaba anulando el ancho de btn-block .