HTML - Como colocar una lista de checkbox al lado de otra

Pos: 43

Val: 29

Como colocar una lista de checkbox al lado de otra

Publicado por Jorge (9 intervenciones) el 22/09/2020 22:21:30

Hola,tengo una pantalla de seleccion de datos y necesito poder colocar al lado de una lista de checkbox otra lista de checkbox. Este es parte del codigo:

<div class="col-md-5">

  <div class="ddecontainer">

    <input type="checkbox" /> 1234 <br />

    <input type="checkbox" /> 4321 <br />

    <input type="checkbox" /> 4345 <br />

    <input type="checkbox" /> 8988 <br />

    <input type="checkbox" /> 3456 <br />

  </div>

</div>

Gracias por su ayuda.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 3

Val: 886

Como colocar una lista de checkbox al lado de otra

Publicado por Lopez (271 intervenciones) el 23/09/2020 01:54:29

Hola Jorge,

Primero que nada quita los <br />. Estos representan un salto de linea.
Seguido BS añade la clase *-inline para estas situaciones.
Prueba así:

<label class="checkbox-inline"><input type="checkbox" value=""><input type="checkbox" /> 3456</label>

Saludos!

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 43

Val: 29

Como colocar una lista de checkbox al lado de otra

Publicado por Jorge (9 intervenciones) el 23/09/2020 14:34:19

Muchas gracias!!

Valora esta respuesta

Comentar

Pos: 43

Val: 29

Como colocar una lista de checkbox al lado de otra

Publicado por Jorge (9 intervenciones) el 23/09/2020 16:02:59

Pero lo que estoy intentando hacer es un recuadro con checkbox verticales y al lado algo separado otro recuadro con otros checkbox verticales.

Valora esta respuesta

Comentar

Pos: 3

Val: 886

Como colocar una lista de checkbox al lado de otra

Publicado por Lopez (271 intervenciones) el 23/09/2020 23:23:28

Oh Jorge,
Sorry bro. Mi culpa.
Algo así te servirá?

<div class="container">

  <div class="row">

<div class="col-5">

    <input type="checkbox" /> 1234 <br />

    <input type="checkbox" /> 4321 <br />

    <input type="checkbox" /> 4345 <br />

    <input type="checkbox" /> 8988 <br />

    <input type="checkbox" /> 3456 <br />

</div>

<div class="col-5">

    <input type="checkbox" /> 1234 <br />

    <input type="checkbox" /> 4321 <br />

    <input type="checkbox" /> 4345 <br />

    <input type="checkbox" /> 8988 <br />

    <input type="checkbox" /> 3456 <br />

</div>

  </div>

</div>

Quedamos atentos,
Saludos!

Valora esta respuesta

Comentar

Pos: 43

Val: 29

Como colocar una lista de checkbox al lado de otra

Publicado por Jorge (9 intervenciones) el 23/09/2020 23:35:38

Gracias Lopez, se nota que estoy aprendiendo?
Otra pregunta, a estas 2 listas necesito ponerle a la izquierda, antes de cada lista un Label. Lo intento pero me sale arriba de la lista y yo lo necesito a la izquierda.
Gracias de antemano.

<div class="col-md-2">

  <div class="inline ddecontainer">

    <input type="checkbox" /> 1234 <br />

    <input type="checkbox" /> 4321 <br />

    <input type="checkbox" /> 4345 <br />

    <input type="checkbox" /> 8988 <br />

    <input type="checkbox" /> 3456 <br />

  </div>

</div>

Valora esta respuesta

Comentar

Pos: 3

Val: 886

Como colocar una lista de checkbox al lado de otra

Publicado por Lopez (271 intervenciones) el 24/09/2020 00:27:26

Hola Jorge,

No te preocupes mi amigo,
Algunos solo llevamos mas tiempo aprendiendo :P

Para que no se te peguen nuestras malas costumbres,
Te invito revises la documentación oficial de Bootstrap : https://getbootstrap.com/docs/4.4/components/forms/
Así ser un pro, y tener buenos ejemplos de uso.
De hecho, para poder hacer un poco mas clara la idea, tome el siguiente código de allí:

<div class="container">

  <div class="row"><!-- ROW -->

<div class="col-5"><!-- COL 1 -->

  <div class="form-check">

  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">

  <label class="form-check-label" for="defaultCheck1">

    Default checkbox

  </label>

</div>

<div class="form-check">

  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>

  <label class="form-check-label" for="defaultCheck2">

    Disabled checkbox

  </label>

</div>

</div><!-- COL 1 -->

<div class="col-5"><!-- COL 2 -->

    <div class="form-check">

  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">

  <label class="form-check-label" for="defaultCheck1">

    Default checkbox

  </label>

</div>

<div class="form-check">

  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>

  <label class="form-check-label" for="defaultCheck2">

    Disabled checkbox

  </label>

</div>

</div><!-- / COL 2 -->

  </div><!-- ROW -->

</div>

Sobre lo de la izquierda, no entendí bien, si quieres el label a la izquierda?
Veras el comportamiento por defecto es el que ves aquí: https://codepen.io/lowpez/pen/BaKMNOR
Input a la izquierda y label a la derecha.
De todas formas, seguro algo podemos hacer.
Saludos.

Valora esta respuesta

Comentar

Pos: 43

Val: 29

Como colocar una lista de checkbox al lado de otra

Publicado por Jorge (9 intervenciones) el 24/09/2020 00:47:03

Con lo del label no me estaba refiriendo al label de cada checkbox, me refería a el titulo que le pongo a la lista. Algo así:

Lista de números: 1234
3324
5823
...

Valora esta respuesta

Comentar

Pos: 3

Val: 886

Como colocar una lista de checkbox al lado de otra

Publicado por Lopez (271 intervenciones) el 24/09/2020 01:07:09

Jorge,

Label significa etiqueta y se aplica generalmente a elementos de formulario :P
Lo que necesitas es un titulo/encabezado.

https://codepen.io/lowpez/pen/BaKMNOR

<div class="col-5">

<h2>Columna 2</h2>

    <input type="checkbox" /> 1234 <br />

......

</div>

El h2 puede ser un h3,h4 etc.
https://www.hazunaweb.com/curso-de-html/encabezados/

Saludos!

Valora esta respuesta

Comentar

Pos: 43

Val: 29

Como colocar una lista de checkbox al lado de otra

Publicado por Jorge (9 intervenciones) el 25/09/2020 14:02:48

Gracias por el ejemplo pero eso ya lo conseguía, ese encabezado necesito ponerlo a la izquierda de la lista, a la altura del primer elemento.

Encabezado: 1234
4356
6654

Gracias

Valora esta respuesta

Comentar

Agrego una imagen y se desactiva un enlace

Plantilla Web Responsive