0

He empezado a trastear con bootstrap para hacer mi web responsive y estoy teniendo un problema. Tengo una serie de inputs y quiero que sean todos iguales en longitud.

Lo que no termino de ver, es cómo lo defino, pues si yo les pongo un ancho fijo ¿no se pierde la gracia de bootstrap?

Igualmente, tampoco consigo modificar su tamaño pues yo le digo que sea un porcentaje de su contenedor pero no hace nada.

.Rent {
  /*width: 200px;*/
  width: 80%;
}
<div class="container-fluid">
  <div class="row" id="map_section">
    <div class="col-2 container-fluid">
      <!-- FILTROS-->
      <fieldset>
        <legend>Filtros mapa: </legend>
        <label for="radio-1">Última posición</label>
        <input type="radio" name="radio-1" class="Rent" id="radio-1">
        <label for="radio-2">Ruta</label>
        <input type="radio" name="radio-1" class="Rent" id="radio-2">

        <legend>Filtro datos: </legend>
        <label for="checkbox-1">Todos</label>
        <input type="checkbox" name="checkbox-1" class="Rent" id="checkbox-1" disabled>
        <label for="checkbox-2">Goat tracker 1</label>
        <input type="checkbox" name="checkbox-2" class="Rent" id="checkbox-2" disabled>
        <label for="checkbox-3">Goat tracker 2</label>
        <input type="checkbox" name="checkbox-3" class="Rent" id="checkbox-3" disabled>
        <label for="checkbox-4">Goat tracker 3</label>
        <input type="checkbox" name="checkbox-4" class="Rent" id="checkbox-4" disabled>

        <input type="number" class="form-control" id='n_nodes_ruta' value="2" min="1" disabled>
        <button type="button" class="btn btn-success btn-sm" id="filtrar_btn_map">Filtrar</button>
      </fieldset>

    </div>
  </div>
</div>

Pienso que los porcentajes quizás es por no haber definido un tamaño al contenedor, pero ¿y cuando le pongo un valor en px?

¿Cómo se haría de forma correcta para respetar al máximo el tema de responsive?

3
  • Usa el grid de bootstrap y así podrás indicar el ancho del input según el tamaño de pantalla.
    – alexval
    el 25 ene. 2020 a las 10:00
  • ¿El grid no es lo de definir a cuantas celdas vas a trabajar? Yo puse esto <div class="col-2 container-fluid">
    – Lleims
    el 25 ene. 2020 a las 10:10
  • Más o menos es eso, es disponer de una rejilla donde colocar los elementos. Pero por lo que me pones arriba no lo usas bien. Hay que poner un elemento con class="container-fluid" y dentro de el los elementos con las columnas que ocupan.
    – alexval
    el 25 ene. 2020 a las 10:54

2 respuestas 2

2

Para usar el grid de Bootstrap debes definir un elemento que sea container o container-fluid y dentro de él indicar las filas (row) y en cada fila indicas las columnas que ocupa cada elemento, en tú código sería algo así:

<div class="container-fluid">
    <div class="row" id="map_section">
        <div class="col-2">
            <!-- FILTROS-->
            <!-- Tus elementos del formulario -->
        </div>
    </div>
</div>

El primer div es el container-fluid, y dentro del container fluid un row, ahora dentro del row a los elementos le pones el col-x que quieras.

Ten en cuenta que si estás haciendo la web responsive puedes indicar diferentes tamaños de columna según el tamaño de ventana como indica en la documentación oficial: https://getbootstrap.com/docs/4.3/layout/grid/#grid-options

 <div class="col-12 col-m-6 col-lg-8">
     <!-- FILTROS-->
     <!-- Tus elementos del formulario -->
 </div>

De esta manera si la ventana es lg (960px o más) el div ocupará 8 de 12. Si la ventana es m (768px o más) el div ocupará 6 de 12. Y si la ventanas menores que m el div ocupará 12 de 12.

4
  • Si no he entendido mal, me sobraba un container-fluid, lo he quitado pero sigue comportándose igual
    – Lleims
    el 25 ene. 2020 a las 11:07
  • acabo de editar añadiendo info sobre los tamaños de pantalla.
    – alexval
    el 25 ene. 2020 a las 11:10
  • Vale, eso es el div pero yo lo que querría es que mis inputs que ahora tienen cada uno el tamaño que quieren, definirles que tengan todos el mismo. Por ejemplo un 75% del contenedor.
    – Lleims
    el 25 ene. 2020 a las 11:12
  • Añádele a cada input el class="col-x" que quieras.
    – alexval
    el 25 ene. 2020 a las 11:15
1

Bootstrap precisamente te ofrece la posibilidad de hacer que el ancho, no sea fijo, sino variable en función de las necesidades tanto de tu site como del dispositivo donde se visualiza. Creo que si estás trabajando con bootstrap puedes hacer uso de su plantilla de grid para colocar de manera sencilla y efectiva los elementos que necesites. Te dejo un ejemplo de como quedaría tu código empleando bootstrap para colocar y distribuir los elementos:

.btn {display: block; margin-top: 50px;}
.margin25 {margin:25px 0}
.w-75 {width:75%}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row" id="map_section">
    <div class="col-12">
      <!-- FILTROS-->
      <fieldset>
      <div class="col-12 col-md-6 form-check margin25">
<div class="col-12">
        <legend>Filtros mapa: </legend>
</div>
<div class="col-12 col-md-6">
<input type="radio" name="radio-1" class="form-check-input" id="radio-1">
        <label  class="form-check-label" for="radio-1">Última posición</label>
</div>
<div class="col-12 col-md-6">
<input type="radio" name="radio-1" class="form-check-input"  id="radio-2">
        <label class="form-check-label ruta" for="radio-2">Ruta</label>
        </div>
      </div>
      <div class="col-12 col-md-6 form-check margin25">
<div class="col-12">
        <legend>Filtro datos: </legend>
</div>
<div class="col-12 col-md-6 col-lg-4">
<input type="checkbox" name="checkbox-1" class="form-check-input" id="checkbox-1" disabled>
        <label class="form-check-label" for="checkbox-1">Todos</label>
</div>
<div class="col-12 col-md-6 col-lg-4">
 <input type="checkbox" name="checkbox-2" class="form-check-input" id="checkbox-2" disabled>
        <label class="form-check-label" for="checkbox-2">Goat tracker 1</label>
</div>
<div class="col-12 col-md-6 col-lg-4">
        <input type="checkbox" name="checkbox-3" class="form-check-input" id="checkbox-3" disabled>
 <label class="form-check-label" for="checkbox-3">Goat tracker 2</label>
</div>
<div class="col-12 col-md-6 col-lg-4">
<input type="checkbox" name="checkbox-4" class="form-check-input" id="checkbox-4" disabled>
        <label class="form-check-label" for="checkbox-4">Goat tracker 3</label>
</div>
        </div>
         <div class="col-12">
        <input type="number"class="form-check-input  w-75" id='n_nodes_ruta' value="2" min="1" disabled>
      </div>
      <div class="col-12">
        <button type="button" class="btn btn-success btn-sm" id="filtrar_btn_map">Filtrar</button>
             </div>
      </fieldset>

</div>
  </div>
</div>

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.