Skip to main content
ajuste a necesidad de la pregunta
Origen Enlace
JorgeGuz
  • 2.4k
  • 2
  • 14
  • 27
.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>
.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>
.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>
ajuste a necesidad de la pregunta
Origen Enlace
JorgeGuz
  • 2.4k
  • 2
  • 14
  • 27
.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">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">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 col-md-6 col-lg-4">12">
        <legend>Filtro datos: </legend>
</div>
<div class="col-12">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">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">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">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>
.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">
<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">
<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 col-md-6 col-lg-4">
        <legend>Filtro datos: </legend>
</div>
<div class="col-12">
<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">
 <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">
        <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">
<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 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>
.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>
Origen Enlace
JorgeGuz
  • 2.4k
  • 2
  • 14
  • 27

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">
<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">
<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 col-md-6 col-lg-4">
        <legend>Filtro datos: </legend>
</div>
<div class="col-12">
<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">
 <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">
        <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">
<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 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>