5

El contenido de la columna 2 se me sale del recuadro en cierta anchura del navegador. ¿Cómo podría evitar esto?

Imagen:introducir la descripción de la imagen aquí

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html>
<head>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
</head>
<body>
  <div class="container">

    <div class="row">
      <div class="col-lg-8 col-md-8" style="background-color:#aaa">
        <h1>Titulo 1</h1>
        <p>Ejemplo de Bootstrap</p>
      </div>
      <div class="col-lg-4 col-md-4" style="background-color:#bbb">
        <h1>Titulo 2</h1>
        <p>Ejemplo de Bootstrap</p>
        <div class="container">
        <div class="row">
          <div class="col-lg-6 col-md-6 col-sm-6 col-6" style="background-color:#ccc">
            <h1>Columna 1</h1>
            <p>Primera noticia</p>
          </div>
          <div class="col-lg-6 col-md-6 col-sm-6 col-6" style="background-color:#ddd">
            <h1>Columna 2</h1>
            <p>Segunda noticia</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  </div>
</body>
</html>

4
  • Por qué tu snippet de codigo se ve distinto a la captura que pones?
    – lois6b
    Commented el 17 ago. 2017 a las 10:52
  • Lo mismo me pregunto yo, los divs se disponen diferente en la anchura mínima. Pero el código es el mismo seguro. Commented el 17 ago. 2017 a las 10:54
  • Creo que deberías replantearte la respuesta correcta. La que has marcado no funcionará correctamente en todos los casos. Si, por ejemplo, el contenido es una imagen en vez de texto o si el tamaño de una única letra es mayor al <div>. En mi respuesta he agregado un ejemplo en el que fallaría. Commented el 17 ago. 2017 a las 11:29
  • No obstante, en su ejemplo el contenido queda oculto y en esta respuesta, aunque quede menos estético, se puede ver el contenido, punto importante si quieres leer lo que hay dentro. Igualmente muchísimas gracias. Commented el 17 ago. 2017 a las 11:33

1 respuesta 1

7

Lo único que necesitas es ocultar lo que sobresalga de una celda de reducido tamaño con overflow: hidden.

El estilo (div.row div) lo aplico a los hijos <div> cuyos padres sean un <div class="row">.

También puedes hacer uso de los estilos overflow-wrap o word-wrap para mejorar el resultado final.

div.row div {
  overflow-wrap: break-word;
  overflow: hidden;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-xs-1" style="background-color:#aaa">
      <h1>Titulo 1</h1>
      <p><img src="https://upload.wikimedia.org/wikipedia/commons/b/bc/House_image_icon.png" /></p>
      <p>Ejemplo de Bootstrap</p>
    </div>
    <div class="col-xs-1" style="background-color:#bbb">
      <h1>Titulo 2</h1>
      <p>Ejemplo de Bootstrap</p>
    </div>
  </div>
</div>

En el siguiente ejemplo muestro que el uso únicamente de overflow-wrap o word-wrap es insuficiente:

div.row div {
  word-wrap: break-word;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-xs-1" style="background-color:#aaa">
      <h1>Titulo 1</h1>
      <p><img src="https://upload.wikimedia.org/wikipedia/commons/b/bc/House_image_icon.png" /></p>
      <p>Ejemplo de Bootstrap</p>
    </div>
    <div class="col-xs-1" style="background-color:#bbb">
      <h1>Titulo 2</h1>
      <p>Ejemplo de Bootstrap</p>
    </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.