Bootstrap 4 引导程序4-网格问题-它没有'；I don’不要在我期待的地方开始新的一行

我正在尝试创建以下内容：

不幸的是，我得到的是：

我正在使用PHP和Bootstrap4。这是我的剧本：

<div class="row"> <!-- row -->

<div class="col-md-9"> <!-- left part of page -->
  <div class="row">

    <div class="panel panel-purple title">
        The Blog Title is Here
    </div>

    <div class="panel panel-purple title">
        <div class="row">
          <div class="col-md-3">
            My image file goes here
          </div>
          <div class="col-md-9">
            A lot of text about the log
          </div>
        </div>
    </div>

  </div> <!-- end of row -->
 </div> <!-- end of left part of page -->

 <div class="col-md-3"> <!-- right part of page -->
   <div class="panel panel-purple">This is where the blog archive list will go.  You can click on Year and then Month to see the blogs</div>
 </div>

博客标题在这里
我的图像文件在这里
很多关于日志的文字
这就是博客存档列表的位置。你可以点击年份，然后点击月份来查看博客

---

以下是工作片段：

在Bootstrap 4中，一个

行

是一个flex元素，在该元素中，您只需使用指定的宽度创建两列，并在其中添加额外的div，这将占用其容器的整个宽度

我在col-9和col-3中添加了一行，因为额外100%宽cols的容器需要弯曲才能正常工作，而且，负边距将使cols额外填充无效。另外，您的

面板

类将再次作为块元素运行，因为它们的容器不是

flex

另外一个优点是，无论内容如何，主行中的两个列都将具有相同的高度，在这种情况下，如果您只希望右侧列中有一个具有背景的自定义元素，只需将其设置为

高度：100%

，它将始终与左侧列一样高

<div class="row">
    <div class="col-9">
        <div class="row">
            <div class="col-12"></div>
            <div class="col-12"></div>
            <div class="col-12"></div>
            <div class="col-12"></div>
        </div>
    </div>
    <div class="col-3>
        <div class="row">
            <div class="col-12"></div>
        </div>
    </div>
</div>

非常感谢。我想我现在明白了，我的html正在工作。