Question

我正在尝试创建它：

不幸的是，这是我得到的：

我正在使用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>

Answer 1

以下是有效的代码段：https://codepen.io/anon/pen/OdNxyK

在Bootstrap 4中，一个row是一个 flex 元素，您可以在该元素内部简单地按指定的宽度制作两列，并在其中添加其他div，这将占用整个他们的容器的宽度。

我在 col-9 和 col-3 内添加了一行，因为额外的100％宽列的容器需要弯曲才能正常工作，并且，负边距将使cols其他填充无效。同样，您的panel类将再次充当块元素，因为它们的容器不会是flex

另一个优点是，无论行内容如何，主行中的两个列都将具有相同的高度，在这种情况下，如果您只想在右侧列中有一个自定义元素作为背景，则只要给它height: 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>

<div class="row"> <!-- row -->
  <div class="col-md-9"> <!-- left part of page -->
    <div class="row">
      <div class="col-12">
        <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>
    </div> <!-- end of row -->
  </div> <!-- end of left part of page -->

   <div class="col-md-3"> <!-- right part of page -->
     <div class="row">
      <div class="col-12">
        <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>
     </div>
   </div>
 </div>

Bootstrap 4-网格问题-它不会在我希望的地方开始新行

1 个答案: