1

Tengo una web en la que cual utilizo bootstrap en y tengo varios div para manejar la estructura de la pagina. La situacion es que tengo un div que no pertenece a ninguna clase predefinida por bootstrap, este div lo utilizo para actualizar mi web segun peticiones ajax que realizo al servidor. Inicialmente este div se carga con los datos del primer registro de una lista de usuarios por ejemplo. Todo funciona correctamente, pero en un momento le puse borde a ese div para ver como lo dibujaba y veo que el div no abarca el contenido que tiene dentro y no respeta las dimensiones de su contenedor. Su altura es cero. A pesar que al abrir las herramientas para desarrollador se puede ver al explorar el DOM que el div mencionado contiene otros elementos html en su interior.

                <div id="d_info_usuario" style="border: solid 1px; ">
                          <div class="col-md-5">
                             <div class="row">
                                <div class="col-md-2"> 
                                  <label>Usuario</label></div>
                                 <div class="col-md-3"> 
                                  <label>Abel Figueroa</label></div>
                              </div>
                             <div class="row">
                               <div class="col-md-2"> 
                                  <label>Departamento</label></div>
                                 <div class="col-md-3"> 
                                 <label>Sistemas</label></div>
                            </div>
                       </div>
                </div>

Cuando abro la pagina en mi navegador web se ve de la siguiente manera: Web de usuarios

La linea que se ve en negro es el div de info de usuarios, se ve que no tiene altura y no respeta el ancho de su contenedor ya que ocupa todo el ancho de la web. Por si hace falta uso internet explorer de navegador (por ahora es mas dificil migrar la web con la tecnologia que usamos que seguir con IE). Cualquier ayuda o sugerencia es bienvenida.

Agregue la clase container-fluid al div de usuarios como sugirio @David :

container fluid

Esta clase hace que el div ocupe todo el ancho de la web, superponiendose con el control select. Si pruebo utilizar la clase container disminuyen el tamaño de los div s internos (ademas tengo entendido que va en contra de las reglas de bootstraps anidar container -tanto mi control select como el div de usuarios estan dentro de un contenedor principal-):

Clase container Saludos.

2 respuestas 2

2

Para evitar problemas con la estructura grid de bootstrap tienes que encapsular las filas (row) dentro de un container o un container al 100% (container-fluid) y a su vez las columnas dentro de filas ya que ese podría ser tu problema en internet explorer. Prueba el siguiente fragmento de código:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div id="d_info_usuario" style="border: solid 1px; " class="container-fluid">
  <div class="row">
    <div class="col-md-2"> 
      <label>Usuario</label>
    </div>
    <div class="col-md-3"> 
      <label>Abel Figueroa</label>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2"> 
      <label>Departamento</label>
    </div>
    <div class="col-md-3"> 
      <label>Sistemas</label>
    </div>
   </div>
</div>

1

Una solucion que encontre pero creo que rompe las reglas de bootstrap es utilizar la clase container y modificar el tamaño de las columnas. Queda de la siguiente manera

            <div class="container" id="d_info_expedinte" style="border: solid 1px; ">
                    <div class="col-md-6" style="border:; ">
                        <div class="row" style="border:; " >
                            <div class="col-md-3" style="border:; "><label>Usuario</label></div>
                            <div class="col-md-3" style="border:; "><label>Abel Figueroa</label></div>
                        </div>
                        <div class="row" style="border:; ">
                            <div class="col-md-3" style="border:; "><label>Departamento</label></div>
                            <div class="col-md-3" style="border:; "><label>Sistemas</label></div>
                        </div>
                    </div>
                </div>`

correccion

Lo que no estoy seguro es de si anidar containers esta permitido (en la practica no pasa nada raro )

1
  • 2
    Creo que no hay ningún problema en anidar containers, lo que si se debería hacer es seguir la jerarquía container > row > col
    – David
    el 28 may. 2019 a las 15:02

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.