¿Cómo dividir dos partes desiguales utilizando bootstrap?

publicado por: Anonymous

Siguiendo los ejemplos de Cristina Castro en una pregunta anterior basándose en el mismo tema Bootstrap.

El problema está en que los dos contenidos div se dividen en partes iguales como se puede observar en este ejemplo:

_x000D_

_x000D_

body {_x000D_
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;_x000D_
  font-size: 1em;_x000D_
  line-height: 1.5;_x000D_
  color: #767676;_x000D_
  font-weight: 400;_x000D_
}_x000D_
h2 {_x000D_
  font-family: "Brandon", Helvetica, Arial, sans-serif;_x000D_
  font-size: 50px!Important;_x000D_
  text-align: center;_x000D_
  margin-bottom: 5px;_x000D_
  color: #30373b;_x000D_
}_x000D_
hr {_x000D_
  width: 50px;_x000D_
  margin: 40px auto;_x000D_
  border-top: 4px solid #ebb129!Important;_x000D_
}_x000D_
p {_x000D_
  color: #949494;_x000D_
  margin-bottom: 0.9375em;_x000D_
  line-height: 1.5;_x000D_
  font-size: 1.2em;_x000D_
}_x000D_
img {_x000D_
  height: auto;_x000D_
  border: none;_x000D_
  max-width: 100%;_x000D_
  vertical-align: middle;_x000D_
}_x000D_
.sub-title {_x000D_
  text-align: center;_x000D_
  display: block;_x000D_
  font-size: 1.38em;_x000D_
  line-height: 1.38;_x000D_
  font-weight: 300;_x000D_
  margin-bottom: 30px;_x000D_
}_x000D_
.icon-big {_x000D_
  margin-top: 5px;_x000D_
  margin-bottom: 10px;_x000D_
  font-size: 35px;_x000D_
  color: #ebb129;_x000D_
  border: 3px solid #ebb129;_x000D_
  -moz-border-radius: 5px 5px 5px 5px;_x000D_
  -webkit-border-radius: 5px 5px 5px 5px;_x000D_
  padding: 10px;_x000D_
  text-align: center;_x000D_
}

_x000D_

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />_x000D_
_x000D_
_x000D_
<div class="container">_x000D_
  <h2>What Makes it Awesome</h2> _x000D_
  <hr/>_x000D_
  <p class="sub-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy rat, sed diam voluptua.</p>_x000D_
_x000D_
  <div class="row">_x000D_
    <!--  row1 -->_x000D_
    <div class="col-sm-6">_x000D_
      <!-- Tomar la mitad de la pantalla1 -->_x000D_
      <!-- Agrego los renglones -->_x000D_
      <div class="row">_x000D_
        <img src="https://ioyby2hf25e3sg55t3muegr1-wpengine.netdna-ssl.com/wp-content/uploads/2015/04/Switch-Onepage-Business-WordPress-Theme.png">_x000D_
      </div>_x000D_
    </div>_x000D_
    <!-- / Tomar la mitad de la pantalla 1 -->_x000D_
    <div class="col-sm-6">_x000D_
      <!-- Tomar la mitad de la pantalla 2 -->_x000D_
      <div class="row">_x000D_
        <h3>Title One Content</h3>_x000D_
        <p>Your project looks great on any device. Content can be easily read and a user understands freely what you wanted to say him or her.</p>_x000D_
      </div>_x000D_
      <div class="row">_x000D_
        <h3>Title One Content</h3>_x000D_
        <p>Your project looks great on any device. Content can be easily read and a user understands freely what you wanted to say him or her.</p>_x000D_
      </div>_x000D_
    </div>_x000D_
    <!-- / Tomar la mitad de la pantalla 2 -->_x000D_
  </div>_x000D_
  <!-- / row1 -->_x000D_
</div>

_x000D_

_x000D_

_x000D_

La idea es crear el mismo estilo del ejemplo pero en partes desiguales donde la imagen ocupe más espacio que el contenido del texto, como muestra el diseño de esta imagen:

Imagen de ejemplo

solución

Los grids de bootstrap se manejan en la escala del 1 al 12, donde el 12 es de pantalla completa y el 1, es la fracción más pequeña que maneja bootstrap,

Para lograr lo que tu estas diciendo bien podrías cambiar las dimensiones de los cols a algo similar a esto

_x000D_

_x000D_

body {_x000D_
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;_x000D_
  font-size: 1em;_x000D_
  line-height: 1.5;_x000D_
  color: #767676;_x000D_
  font-weight: 400;_x000D_
}_x000D_
_x000D_
img {_x000D_
  height: auto;_x000D_
  border: none;_x000D_
  max-width: 100%;_x000D_
  vertical-align: middle;_x000D_
}

_x000D_

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />_x000D_
<div class="col-sm-8">_x000D_
  <div class="row">_x000D_
    <img src="https://ioyby2hf25e3sg55t3muegr1-wpengine.netdna-ssl.com/wp-content/uploads/2015/04/Switch-Onepage-Business-WordPress-Theme.png">_x000D_
  </div>_x000D_
</div>_x000D_
<div class="col-sm-4">_x000D_
  <div class="row">_x000D_
    <h3>Title One Content</h3>_x000D_
    <p>Your project looks great on any device. Content can be easily read and a user understands freely what you wanted to say him or her.</p>_x000D_
  </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Aquí te dejo un poco mas la información acerca de los grids de bootstrap

Respondido por: Anonymous

Leave a Reply

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