无法创建引导网格

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

如果您将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>

Answer 2

您可以将section / container 分成两列（左/右），然后将右列分成行（文本/图像）

如下所示（查看演示）

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