Bootstrap combinando filas (rowspan)

127

Estoy probando Twitter Bootstrap y me quedé atascado con andamios básicos con filas. Volví a visitar su documentación varias veces y puedo ver columnas de anidación donde básicamente puedes anidar columnas dentro de una columna, pero no puedo ubicar la capacidad de combinar filas en una y alinearla con la columna al lado de las filas no combinadas.

La imagen de abajo debe ilustrar lo que quiero lograr.

muestra de diseño de hileras

La única solución alternativa que encontré es usar tablas, pero no me gusta esta idea ya que mi opinión es que la capacidad de respuesta no funcionaría con el uso de tablas.

¿Alguien tiene alguna solución elegante para esto? La mayoría del diseño web que necesito necesitará un excelente nivel de flexibilidad, por lo que sería genial si pudiera recoger algo útil aquí.

Seong Lee
fuente

Respuestas:

98

Los Divs se apilan verticalmente de manera predeterminada, por lo que no hay necesidad de un manejo especial de "filas" dentro de una columna.

div {
  height:50px;
}
.short-div {
  height:25px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <h1>Responsive Bootstrap</h1>
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:red;">Span 5</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3</div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
      <div class="short-div" style="background-color:green">Span 2</div>
      <div class="short-div" style="background-color:purple">Span 2</div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="background-color:yellow">Span 2</div>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div class="short-div" style="background-color:#999">Span 6</div>
      <div class="short-div">Span 6</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color:#ccc">Span 6</div>
  </div>
</div>

Aquí está el violín .

Paul Keister
fuente
2
Muchas gracias. Eso es lo que estaba buscando! Deseo que la documentación de Bootstrap mencione esto adicionalmente bajo columnas de anidación ya que el enfoque es básicamente el mismo.
Seong Lee
1
en su ejemplo se define 1row=25px, 2row=50px. ¿Puedes hacer que el divisor extendido sea tan alto como toda la fila? Intenté agregar .row{height:100%;}pero no funcionó.
Tomer W
Sí, @carter el ejemplo original no era compatible con bootstrap 3; Lo he corregido.
Paul Keister el
1
El ejemplo tiene canales en la segunda fila que parece extraño.
Connie DeCinko
83

Debe usar el anidamiento de columnas de rutina de carga.

Ver Bootstrap 3 o Bootstrap 4 :

<div class="row">
    <div class="col-md-5">Span 5</div>
    <div class="col-md-3">Span 3<br />second line</div>
    <div class="col-md-2">
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
    </div>
    <div class="col-md-2">Span 2</div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">Span 6</div>
            <div class="col-md-12">Span 6</div>
        </div>
    </div>
    <div class="col-md-6">Span 6</div>
</div>

http://jsfiddle.net/DRanJ/125/

(En la pantalla del violín, agrandar la pantalla de prueba para ver el resultado, porque estoy usando COL- MD - *, luego columnas pilas de respuesta)

Nota : No estoy seguro de que BS2 permita el anidamiento de columnas , pero en la respuesta de Paul Keister, el anidamiento de columnas no se usa. Debe usarlo y evitar reinventar css mientras bootstrap funciona bien.

La altura de las columnas es automática, si agrega una segunda línea (como lo hago en mi ejemplo), la altura de la columna se adapta.

Alcalyn
fuente
10
Esta debería ser la respuesta aceptada porque funciona con Bootstrap fuera de la caja y no requiere ningún ajuste de CSS
cheenbabes
La respuesta aceptada es más legible; contiene un fragmento de código y un enlace a JSfiddle y en mi humilde opinión, los ejemplos de Paul Keister son más claros que los ejemplos de Alcalyn. Es por eso que creo que la respuesta de Paul Keister debe mantenerse como la respuesta aceptada, al menos hasta que se mejore la respuesta de Alcalyn.
naXa
1
@Alcalyn en mi navegador (Chrome), el violín vinculado de su respuesta no produce el resultado esperado (vea la imagen en la pregunta). El resultado real es todos los divs alineados en una columna.
naXa
1
Si ve una sola columna con todos los tramos alineados, esto se debe a la -md-regla de respuesta. Debe ampliar su pantalla para ver el resultado esperado. Si necesita que sus tramos se muestren como columnas en pantallas más pequeñas, reemplácelas -md-con -sm-o -xs-. Esta es una pregunta de punto de interrupción (consulte bootstrapdocs.com/v3.0.3/docs/css/#grid ).
Alcalyn
12

Nota: Esto fue para Bootstrap 2 (relevante cuando se hizo la pregunta).

Puede lograr esto usando row-fluidpara hacer una fila basada en fluidos (porcentaje) dentro de una existente block.

<div class="row">
   <div class="span5">span5</div>
   <div class="span3">span3</div>
   <div class="span2">
      <div class="row-fluid">
         <div class="span12">span2</div>
         <div class="span12">span2</div>
      </div>
   </div>
   <div class="span2">span2</div>
</div>
<div class="row">
   <div class="span6">
      <div class="row-fluid">
         <div class="span12">span6</div>
         <div class="span12">span6</div>
      </div>
   </div>
   <div class="span6">span6</div>
</div>

Aquí hay un ejemplo de JSFiddle .

Me di cuenta de que había un margen izquierdo extraño que aparece (o no aparece) para los tramos dentro del row-fluiddespués del primero. Esto se puede solucionar con un pequeño ajuste CSS (es el mismo CSS que se aplica al primer hijo, expandido a los que están más allá del primer hijo):

.row-fluid [class*="span"] {
    margin-left: 0;
}
pickypg
fuente
Gracias por su esfuerzo, pero parece que una fila no tiene que usar row-fluid para lograr esto como lo sugiere mi respuesta seleccionada. ¡Realmente lo aprecio!
Seong Lee
1
Muy cierto, pero no olvides row-fluidcuando llegue el momento de comenzar a subdividir las filas internas.
pickypg
7

Revisa este. Espero que te ayude por completo.

http://jsfiddle.net/j6amM/

.row-fix { margin-bottom:20px;}

.row-fix > [class*="span"]{ height:100px; background:#f1f1f1;}

.row-fix .two-col{ background:none;}

.two-col > [class*="col"]{ height:40px; background:#ccc;}

.two-col > .col1{margin-bottom:20px;}
Manish Sharma
fuente
1

La respuesta de Paul parece vencer el propósito de bootstrap; el de responder al tamaño de la ventana gráfica / pantalla.

Al anidar filas y columnas, puede lograr el mismo resultado, al tiempo que conserva la capacidad de respuesta.

Aquí hay una respuesta actualizada a este problema;

<div class="container-fluid">
  <h1>  Responsive Nested Bootstrap </h1> 
  <div class="row">
    <div class="col-md-5" style="background-color:red;">Span 5</div>
    <div class="col-md-3" style="background-color:blue;">Span 3</div>
    <div class="col-md-2">
      <div class="row">
        <div class="container" style="background-color:green;">Span 2</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:purple;">Span 2</div>
      </div>
    </div>
    <div class="col-md-2" style="background-color:yellow;">Span 2</div>
  </div>
  
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="container" style="background-color:yellow;">Span 6</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:green;">Span 6</div>
      </div>
    </div>
    <div class="col-md-6" style="background-color:red;">Span 6</div>
  </div>
</div>

Puedes ver el codepen aquí.

vasavest
fuente
0

div {
  height:50px;
}
.short-div {
  height:25px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <h1>Responsive Bootstrap</h1>
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:red;">Span 5</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3</div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
      <div class="short-div" style="background-color:green">Span 2</div>
      <div class="short-div" style="background-color:purple">Span 2</div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="background-color:yellow">Span 2</div>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div class="short-div" style="background-color:#999">Span 6</div>
      <div class="short-div">Span 6</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color:#ccc">Span 6</div>
  </div>
</div>

SUDIP SINGH
fuente
Esto no funciona para mí con <div class = "col-sm-2"> <div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4" style = "background- color: amarillo; "> <input type =" file "id =" imgInp "name =" img "accept =". png, .jpg, .jpeg "> <! - <input type =" text "src =" "class =" form-control "id =" imgName "size =" 40 "> </input> -> <img id =" img-upload "src =" "alt =" Transporter "width =" 300% " height = "50%" class = "círculo redondeado" /> </div> </div> </div>
SUDIP SINGH
2
Agregue una explicación sobre su código. Para que OP y el futuro lector puedan entender fácilmente su respuesta.
Sangam Belose