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

 
Vista:
sin imagen de perfil
Val: 29
Ha disminuido su posición en 2 puestos en HTML (en relación al último mes)
Gráfica de HTML

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:

1
2
3
4
5
6
7
8
9
10
<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 claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Lopez
Val: 861
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Como colocar una lista de checkbox al lado de otra

Publicado por Lopez (266 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í:

1
<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 claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 29
Ha disminuido su posición en 2 puestos en HTML (en relación al último mes)
Gráfica de HTML

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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 29
Ha disminuido su posición en 2 puestos en HTML (en relación al último mes)
Gráfica de HTML

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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Lopez
Val: 861
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Como colocar una lista de checkbox al lado de otra

Publicado por Lopez (266 intervenciones) el 23/09/2020 23:23:28
Oh Jorge,
Sorry bro. Mi culpa.
Algo así te servirá?



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 29
Ha disminuido su posición en 2 puestos en HTML (en relación al último mes)
Gráfica de HTML

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.

1
2
3
4
5
6
7
8
9
<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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Lopez
Val: 861
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Como colocar una lista de checkbox al lado de otra

Publicado por Lopez (266 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í:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 29
Ha disminuido su posición en 2 puestos en HTML (en relación al último mes)
Gráfica de HTML

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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Lopez
Val: 861
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Como colocar una lista de checkbox al lado de otra

Publicado por Lopez (266 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

1
2
3
4
5
<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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 29
Ha disminuido su posición en 2 puestos en HTML (en relación al último mes)
Gráfica de HTML

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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar