html - 无法创建引导网格

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>