Как разделять две неравные части используя bootstrap?

Продолжая примеры Кристины Кастро в предыдущем вопросе основываясь на той же теме Bootstrap.

Проблема, - в котором два контента div они разделяются на равные части, как возможно наблюдать в этом примере:

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


<div class="container">
  <h2>What Makes it Awesome</h2> 
  <hr/>
  <p class="sub-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy rat, sed diam voluptua.</p>

  <div class="row">
    <!--  row1 -->
    <div class="col-sm-6">
      <!-- Tomar la mitad de la pantalla1 -->
      <!-- Agrego los renglones -->
      <div class="row">
        <img src="https://ioyby2hf25e3sg55t3muegr1-wpengine.netdna-ssl.com/wp-content/uploads/2015/04/Switch-Onepage-Business-WordPress-Theme.png">
      </div>
    </div>
    <!-- / Tomar la mitad de la pantalla 1 -->
    <div class="col-sm-6">
      <!-- Tomar la mitad de la pantalla 2 -->
      <div class="row">
        <h3>Title One Content</h3>
        <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>
      </div>
      <div class="row">
        <h3>Title One Content</h3>
        <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>
      </div>
    </div>
    <!-- / Tomar la mitad de la pantalla 2 -->
  </div>
  <!-- / row1 -->
</div>

Идея состоит в том, чтобы создавать тот же стиль примера, но в неравных частях, где изображение заняло больше место, чем контент текста, как он показывает рисунок этого изображения:

Imagen de ejemplo

2
задан 08.05.2019, 22:44
1 ответ

Чтобы мочь разделять экран на равные или неравные части используя Bootstrap, не необходимо добавлять ningГєn добавочный стиль, только достаточно показывать tamaГ±o твоих колонн, в этом примере, что я ты оставляю эту 6 и 6 aquГ - ты можешь отделять в tamaГ±o, в котором ты нуждался: я оставляю тебе одну ссылку для того, чтобы ты смог писать код boostrap без мусора: https://www.layoutit.com/build

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-6">
                </div>
                <div class="col-md-6">
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                </div>
                <div class="col-md-6">
                </div>
            </div>
        </div>
    </div>
</div>
1
ответ дан 03.12.2019, 17:22