Невозможно создать сетку начальной загрузки

Question

Я застрял в точке, где я не знаю, куда идти .... Я пытаюсь создать систему сетки для моего сайта, но не получаю желаемого результата.

Вотструктура вывода, которую я хочу создать с помощью Bootstrap 4:

Мой код:

 <section class="homepage-banner-section">

            <div class="container">
                <div class="row">
                    <div class="col-sm-4 col-md-4">
                         <img src="img/home-banner-one.png" class="img-fluid" alt="Responsive image">
                    </div>
                    <div class="col-sm-8 col-md-8">
                        <div class="row">
                            <div class="col-sm-4">
                                Some text here
                            </div>
                            <div class="col-sm-8">
                                <img src="img/home-banner-two.png" class="img-fluid" alt="Responsive image">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        Some Text Here
                    </div>
                </div>
            </div>

        </section>

Я буду признателен, если кто-то направит меня в правильном направлении. Имейте недостаток знаний о системе сетки начальной загрузки и классах столбцов.

Answer 1

Вы можете разделить ваш section / container на два столбца (влево / вправо), а затем правый столбец на строки (текст / изображение)

Примерно ниже ( см. Демонстрацию *)1006 *)

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script>
<section class="homepage-banner-section">
  <div class="container">
    <div class="row">
      <!-- left column -->
      <div class="col-xs-4">
        <img src="https://placekitten.com/200/300" class="img-fluid" alt="Responsive image">
      </div>
      <!-- right column -->
      <div class="col-xs-8">
        <!-- first row -->
        <div class="row">
          <div class="col">
            some text only on right column
          </div>
        </div>
        <!-- second row -->
        <div class="row">
          <div class="col">
            <img src="https://placekitten.com/300/100" class="img-fluid" alt="Resp. img">
          </div>
        </div>
      </div>
    </div>
    <!-- footer -->
    <div class="row">
      <div class="col-xs-12">
        footer text that goes the width of the container
      </div>
    </div>
  </div>
</section>

Answer 2

Если вы измените оба значения col-sm-4 на col-12, вы получите два столбца полной ширины внутри вашего row.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="homepage-banner-section">

  <div class="container">
    <div class="row">
      <div class="col-sm-4 col-md-4">
        <img src="img/home-banner-one.png" class="img-fluid" alt="Responsive image">
      </div>
      <div class="col-sm-8 col-md-8">
        <div class="row">
          <div class="col-12">
            Some text here
          </div>
          <div class="col-12">
            <img src="img/home-banner-two.png" class="img-fluid" alt="Responsive image">
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        Some Text Here
      </div>
    </div>
  </div>

</section>