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
    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. 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. 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. 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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.