¿Agregar espacios en blanco verticales usando Twitter Bootstrap?


162

¿Cuál es la mejor manera de agregar espacios en blanco verticales usando Bootstrap de Twitter?

Por ejemplo, supongamos que estoy creando una página de destino y me gustaría un poco (100px) de espacios en blanco en blanco encima y debajo de un botón determinado. Obviamente, podría crear una clase determinada para ese botón en particular. Pero, creo que Bootstrap debería tener una forma SECA de agregar espacios en blanco verticales.

Respuestas:


39

En Bootstrap 4 hay utilidades de espaciado .

Citando la documentación para la notación usada :

Las utilidades de espaciado que se aplican a todos los puntos de interrupción, desde xshasta xl, no tienen abreviatura de punto de interrupción en ellas. Esto se debe a que esas clases se aplican desde min-width: 0arriba y, por lo tanto, no están vinculadas por una consulta de medios. Los puntos de interrupción restantes, sin embargo, incluyen una abreviatura de punto de interrupción.

Las clases se denominan utilizando el formato {property}{sides}-{size}de xs y {property}{sides}-{breakpoint}-{size}para sm, md, lg, y xl.

Donde la propiedad es uno de:

  • m - para clases que establecen margin
  • p - para clases que establecen padding

Donde lados es uno de:

  • t- para clases que establecen margin-topopadding-top
  • b- para clases que establecen margin-bottomopadding-bottom
  • l- para clases que establecen margin-leftopadding-left
  • r- para clases que establecen margin-rightopadding-right
  • x- para clases que establecen ambos *-lefty*-right
  • y- para clases que establecen ambos *-topy*-bottom
  • en blanco: para las clases que establecen un margino paddingen los 4 lados del elemento

Donde el tamaño es uno de:

  • 0 - para clases que eliminan el margen o el relleno al configurarlo en 0
  • 1- (por defecto) para las clases que establecer la margino paddingde$spacer * .25
  • 2- (por defecto) para las clases que establecer la margino paddingde$spacer * .5
  • 3- (por defecto) para las clases que establecer la margino paddingde$spacer
  • 4- (por defecto) para las clases que establecer la margino paddingde$spacer * 1.5
  • 5- (por defecto) para las clases que establecer la margino paddingde$spacer * 3

Entonces, para tener un espacio vertical adicional sobre y debajo de un elemento, usaría my-5class.


3
¿Podría dar un ejemplo de una cadena de clase válida?
Kolob Canyon

¡Agradable! Esto es genial.
Tiki

51

En v2, no hay nada incorporado para tanto espacio vertical, por lo que querrás seguir con una clase personalizada. Para alturas más pequeñas, generalmente solo tiro <div class="control-group">un botón.


8
o <div class = "btn-toolbar">
dyurkavets

9
Gracias. Ahora he creado algunas clases spacer10, spacer50, etc. para este uso. Veo que ya hay una solicitud de función en github para esto: bit.ly/R9oap9
Ryan

1
@ Ryan: Bien, no vi la solicitud de extracción. Estoy un poco en conflicto por eso. Bootstrap es casi completamente presentacional (y conveniente), pero si entrecierra los ojos lo suficiente como para ignorar todo el HTML adicional, puede derivar la semántica de él. El espacio vertical es puramente de presentación, por lo que creo que es mejor hacerlo con una clase / ID personalizada.
jmdeldin

2
Esto fue para v2, pero parece que v3 ha minimizado el espacio .btn-toolbar, por lo que debería agregar una nueva clase con sus propios márgenes.
jmdeldin

3
Aparentemente, la solicitud de la función github se ha cerrado y la función puede ingresar a Bootstrap v4. bit.ly/R9oap9
Ryan

48

El ajuste funciona, pero cuando solo quieres un espacio, me gusta:

<div class="col-xs-12" style="height:50px;"></div>

16
Agregar un estilo en línea cuando se trabaja con Bootstrap generalmente no es una buena idea. Al menos debería entrar en CSS.
alexykot

2
observe que "col-xs-12" es exactamente lo mismo que no tener clases en absoluto
Soldeplata Saketos

34

Lamento cavar una tumba vieja aquí, pero ¿por qué no hacer esto?

<div class="form-group">
    &nbsp;
</div>

Agregará un espacio a la altura de un elemento de forma normal.

Parece que aproximadamente 1 línea en un formulario tiene aproximadamente 50 px (47 px en mi elemento que acabo de inspeccionar). Esta es una forma horizontal, con etiqueta a la izquierda 2col y entrada a la derecha 10col. Entonces sus píxeles pueden variar.

Como el mío es básicamente de 50 px, crearía un espaciador de 50 px de alto sin márgenes ni relleno;

.spacer { margin:0; padding:0; height:50px; }
<div class="spacer"></div>

1
Esto agrega espacio debajo del grupo pero no arriba
icc97

Por supuesto que sí, eso es exactamente lo que pidió, una forma de agregar un espacio en blanco vertical. Si necesita un grupo o fila de formulario personalizado o incluso un botón, cree su propia clase para agregarlo, anulando los márgenes. Es decir: class = "form-group spaced-group" y ".spaced-group {margin-top: 15px! Important; margin-bottom: 15px! Important;} ... Es solo sentido común css.
Wade

El OP específicamente preguntó: "un poco (100px) de espacio en blanco en blanco arriba y debajo de un botón determinado"
icc97

1
No, ese era un ejemplo, no su pregunta. Su pregunta fue "¿Cuál es la mejor manera de agregar espacio en blanco vertical usando Bootstrap de Twitter?" - un espacio en blanco vertical es diferente de un margen en un elemento específico. Si lo estuviera haciendo para todos los botones, podría cambiar el margen de btn o hacer su propia clase como "btn-spaced" con sus márgenes deseados. Si solo quiere una manera de agregar un espacio donde quiera, lo que necesita es un espaciador de una altura fija como le respondí. Hizo una pregunta y dio un ejemplo de otra. Supuse que sabía CSS lo suficiente como para saber que podía anular los márgenes.
Wade

Como dijo un método DRY y un botón, entonces crearía una clase de botón con los márgenes que quería: btn-spaced. Si no fuera por solo botones, entonces un margen general que se aplicaría a filas, grupos de formularios, lo que sea. Como class = "row space-small" o class = "form-group space-medium" .. Donde small medium y large son solo variantes de los márgenes, y podrían aplicarse a prácticamente cualquier cosa. - Difícil saber qué quiere el operador. Solo para botones o para cualquier elemento ..
Wade

24

Sé que esto es viejo, pero vine aquí buscando lo mismo, encontré que Bootstrap tiene el bloque de ayuda, muy útil para estas situaciones:

<div class="help-block"></div>

21

Para la versión 3, no parece haber una forma "bootstrap" de lograrlo de manera clara.

A panel, a welly a form-groupproporcionan un cierto espacio vertical.

Aparentemente, una solución de espaciado vertical específico más formal está en la hoja de ruta para bootstrap v4

https://github.com/twbs/bootstrap/issues/4286#issuecomment-36331550 https://github.com/twbs/bootstrap/issues/13532


55
.form-group parece la mejor opción ya que css se limita a margin-bottom: 15px. .well y .panel no deben usarse si simplemente desea agregar algo de espacio ya que tienen otros atributos (como fondo, relleno, borde, etc.)
xaa

9

Simplemente creé una clase div usando varias alturas, es decir

<div class="divider-10"></div>

El CSS es:

.divider-10 {
    width:100%; 
    min-height:1px; 
    margin-top:10px; 
    margin-bottom:10px;  
    display:inline-block; 
    position:relative;
}

Simplemente cree una clase divisoria para cualquier altura que se necesite.


8

Mi truco No es elegante, pero funciona:

<p>&nbsp;</p>

2
@JayKilleen +1 Deberías publicar eso como respuesta. Quizás las personas se están volviendo dependientes de los marcos y han comenzado a olvidar lo básico.
ADJenks

5

Solo úsalo <br/>. Me encontré aquí buscando la respuesta a esta pregunta y luego me sentí un poco tonto por no pensar en usar un salto de línea simple como lo sugirió el usuario JayKilleen en un comentario.


Lo malo es que no obtienes un control exacto de 100 px, pero ciertamente debería funcionar para agregar una cantidad razonable de espacio.
mix3d

1
@ mix3d, tienes razón, al principio no me di cuenta de que le importaba que fuera exactamente 100px. Pensé que solo quería un "poco". Definitivamente podría hacer su propia clase de ayuda como todos sugirieron. Pero dado que esta publicación tiene tantos años, ahora podría actualizar a Bootstrap 4 para un espaciado preciso, o tomar las clases auxiliares.
ADJenks

5

Sé que esto es antiguo y hay varias buenas soluciones ya publicadas, pero una solución simple que funcionó para mí es el siguiente CSS

<style>
  .divider{
    margin: 0cm 0cm .5cm 0cm;
  }
</style>

y luego crea un div en tu html

<div class="divider"></div>

4

Intenté usarlo <div class="control-group">y no cambió mi diseño. No agregó espacio vertical. La solución que funcionó para mí fue:

<ol style="visibility:hidden;"></ol>

Si eso no le da suficiente espacio vertical, puede obtener más de forma incremental agregando <li>&nbsp;</li>etiquetas anidadas .


Gracias, y su sugerencia funcionaría con o sin Bootstrap. Pero la pregunta era específicamente sobre el uso de Twitter Bootstrap para agregar el espacio.
Jonathan

1
<form>
 <fieldset class="form-group"><input type="text" class="form-control" placeholder="Input"/></fieldset>
 <fieldset class="form-group"><button class="btn btn-primary"/>Button</fieldset>
</form>

http://v4-alpha.getbootstrap.com/components/forms/#form-controls


1
¿Cómo es esto una respuesta a la pregunta?
Matt S

Agrega un espacio vertical como lo solicitó el póster original, también los desarrolladores de bootstrap ahora lo atienden en la última versión (4) en estado beta. En realidad, es la respuesta correcta y si googleas el espaciado vertical en bootstrap, verás que no fue atendido previamente. No desestime las cosas que no ha probado o buscado en Google.
Den

Claramente no has leído la pregunta. "Me gustaría un poco (100px) de espacio en blanco en blanco encima y debajo de un botón determinado". Un cierto botón ... un cierto botón ...
Matt S

1
Antes de eso dijo: "Por ejemplo, digamos". Era solo un ejemplo, no era el problema específico. No cites fuera de contexto. El ejemplo que proporcioné es amplio y toda la información que proporcioné es adecuada.
Den

-3

No hay nada más SECO que

.btn {
    margin-bottom:5px;
}

13
Recomiendo no modificar el estilo de las clases básicas de bootstrap css.
James Palawaga

1
@JamesPalawaga +1. Pero si esto fuera un estándar general en su aplicación, podría anular el estilo bootstrap, usando MENOS y variables y / u hojas de estilo de anulación cuidadosamente administradas.
Jonathan
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.