0

Quiero poner los 4 divs de los textarea 2 a 2 en paralelo y los divs llamados"aforochart" y "reservaschart" también ambos en paralelo.Los divs de los charts no he puesto el código javascript porque ocupa mucho y no es necesario. Solo quiero alinear los divs

Con css si es necesario.

Gracias

<div class="col-12 col-lg-6">
                            <div style="padding-left:10px;">
                            <a><span class="badge badge-dark">Número de Reservas de 10:00 a 12:00</span></a>
                            <text class="badge badge-dark" name="2ºhora" cols="5" rows="2" id="2ºhora" readonly="readonly" value="<?php echo $fila['total']; ?>"><?php echo $fila['total']; ?> </text>
                                <a><span class="badge badge-dark">reservas</span></a>
                                </div>
          </div>
<div class="col-12 col-lg-6">
                            <div style="padding-left:10px;">
                            <a><span class="badge badge-dark">Número de Reservas de 12:00 a 14:00</span></a>
                            <text class="badge badge-dark" name="3ºhora" cols="5" rows="2" id="3ºhora" readonly="readonly" value="<?php echo $fila['total']; ?>"><?php echo $fila['total']; ?> </text>
                                <a><span class="badge badge-dark">reservas</span></a>
                                </div>
          </div>
 <div class="col-12 col-lg-6">
                            <div style="padding-left:10px;">
                            <a><span class="badge badge-dark">Número de Reservas de 14:00 a 16:00</span></a>
                            <text class="badge badge-dark" name="4ºhora" cols="5" rows="2" id="4ºhora" readonly="readonly" value="<?php echo $fila['total']; ?>"><?php echo $fila['total']; ?> </text>
                                <a><span class="badge badge-dark">reservas</span></a>
                                </div>
          </div>
<div class="col-12 col-lg-6">
                            <div style="padding-left:10px;">
                            <a><span class="badge badge-dark">Número de Reservas de 16:00 a 19:00</span></a>
                            <text class="badge badge-dark" name="5ºhora" cols="5" rows="2" id="5ºhora" readonly="readonly" value="<?php echo $fila['total']; ?>"><?php echo $fila['total']; ?> </text>
                                <a><span class="badge badge-dark">reservas</span></a>
                                </div>
          </div>

          <div id="reservaschart"></div>
          <div id="aforochart"></div>

2 respuestas 2

1

No entiendo del todo lo que quieres hacer pero por el nombre de las clases ¿estás utilizando ? Si es así y lo que quieres hacer es lo que pienso puedes hacer lo siguiente:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container">
    <div class="row">
      <div class="col-6 col-lg-6">
        <div style="padding-left:10px;">
          <a><span class="badge badge-dark">Número de Reservas de 10:00 a 12:00</span></a>
          <text class="badge badge-dark" name="2ºhora" cols="5" rows="2" id="2ºhora" readonly="readonly" value="<?php echo $fila['total']; ?>"><?php echo $fila['total']; ?> </text>
          <a><span class="badge badge-dark">reservas</span></a>
        </div>
      </div>
      <div class="col-6 col-lg-6">
        <div style="padding-left:10px;">
          <a><span class="badge badge-dark">Número de Reservas de 12:00 a 14:00</span></a>
          <text class="badge badge-dark" name="3ºhora" cols="5" rows="2" id="3ºhora" readonly="readonly" value="<?php echo $fila['total']; ?>"><?php echo $fila['total']; ?> </text>
          <a><span class="badge badge-dark">reservas</span></a>
        </div>
      </div>    
    </div>

    <div class="row">
      <div class="col-6 col-lg-6">
        <div style="padding-left:10px;">
          <a><span class="badge badge-dark">Número de Reservas de 14:00 a 16:00</span></a>
          <text class="badge badge-dark" name="4ºhora" cols="5" rows="2" id="4ºhora" readonly="readonly" value="<?php echo $fila['total']; ?>"><?php echo $fila['total']; ?> </text>
          <a><span class="badge badge-dark">reservas</span></a>
        </div>
      </div>
      <div class="col-6 col-lg-6">
        <div style="padding-left:10px;">
          <a><span class="badge badge-dark">Número de Reservas de 16:00 a 19:00</span></a>
          <text class="badge badge-dark" name="5ºhora" cols="5" rows="2" id="5ºhora" readonly="readonly" value="<?php echo $fila['total']; ?>"><?php echo $fila['total']; ?> </text>
          <a><span class="badge badge-dark">reservas</span></a>
          </div>
      </div> 
    </div>

    <div class="row">
      <div class="col-6 col-lg-6" id="reservaschart">RESERVASCHART</div>
      <div class="col-6 col-lg-6" id="aforochart">AFOROCHART</div>
    </div>    
  </div>

0

El problema existe que usaste lo siguiente "col-12" esto hace que ocupe el 100% el orden correcto seria el siguiente:

<div class="col-6">Bloque 1 A</div>
<div class="col-6">Bloque 2 A</div>
<div class="col-6">Bloque 1 B</div>
<div class="col-6">Bloque 2 B</div>
<div id="reservaschart col-6"></div>
<div id="aforochart col-6"></div>

En cambio el "col-6" ocupa el "50%" del espacio en el contenedor donde se agregue.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.