Centrar contenido en bootstrap

publicado por: Anonymous

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í

_x000D_

_x000D_

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<!doctype html>_x000D_
<html>_x000D_
<head>_x000D_
  <link href="css/bootstrap.min.css" rel="stylesheet">_x000D_
  <meta name="viewport" content="width=device-width, initial-scale=1">_x000D_
<!-- Latest compiled and minified CSS -->_x000D_
</head>_x000D_
<body>_x000D_
  <div class="container">_x000D_
_x000D_
    <div class="row">_x000D_
      <div class="col-lg-8 col-md-8" style="background-color:#aaa">_x000D_
        <h1>Titulo 1</h1>_x000D_
        <p>Ejemplo de Bootstrap</p>_x000D_
      </div>_x000D_
      <div class="col-lg-4 col-md-4" style="background-color:#bbb">_x000D_
        <h1>Titulo 2</h1>_x000D_
        <p>Ejemplo de Bootstrap</p>_x000D_
        <div class="container">_x000D_
        <div class="row">_x000D_
          <div class="col-lg-6 col-md-6 col-sm-6 col-6" style="background-color:#ccc">_x000D_
            <h1>Columna 1</h1>_x000D_
            <p>Primera noticia</p>_x000D_
          </div>_x000D_
          <div class="col-lg-6 col-md-6 col-sm-6 col-6" style="background-color:#ddd">_x000D_
            <h1>Columna 2</h1>_x000D_
            <p>Segunda noticia</p>_x000D_
          </div>_x000D_
        </div>_x000D_
      </div>_x000D_
    </div>_x000D_
  </div>_x000D_
_x000D_
  </div>_x000D_
</body>_x000D_
</html>

_x000D_

_x000D_

_x000D_

solución

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.

_x000D_

_x000D_

div.row div {_x000D_
  overflow-wrap: break-word;_x000D_
  overflow: hidden;_x000D_
}

_x000D_

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

_x000D_

_x000D_

_x000D_

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

_x000D_

_x000D_

div.row div {_x000D_
  word-wrap: break-word;_x000D_
}

_x000D_

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

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *