Question

我有以下页面结构：

<div class="container">
  <div class="row mb-5">
    <div class="col-12 col-md-3">
      <img class="mr-5 img-fluid" src="big_icon_1.png" alt="Big icon 1">
    </div>
    <div class-"col-12 col-md-9">
      <h3 class="mt-0 mb-1 text-center text-md-left">Item 1</h3>
      <p>This is item 1.</p>
    </div>
  </div>
  <div class="row mb-5">
    <div class="col-12 col-md-3">
      <img class="mr-5 img-fluid" src="big_icon_2.png" alt="Big icon 2">
    </div>
    <div class-"col-12 col-md-9">
      <h3 class="mt-0 mb-1 text-center text-md-left">Item 2</h3>
      <p>This is item 2.</p>
    </div>
  </div>
</div>

我期待的是“md＆＃39;”中的列布局。断点，以及下面的堆叠布局，这确实是我得到的。但第二个＆＃39; col＆＃39;永远不会延伸到父排的右边缘＃39;容器，我不明白为什么，因为Bootstrap文档中的所有示例都准确地说明了这一点。

所以我的图标列很好地设置为桌面上的1/4行宽和移动设备上的全宽。但是标题和文本的列只有它的内容一样宽，无论显示的大小。当然，这使得标题居中毫无意义。

我错过了什么？

Answer 1

这个网站上的源格式化程序未能抓住这个小宝石，我的源代码编辑器有一个非常微妙的色差，我没有注意到：

<div class-"col-12 col-md-9">

当然应该是

<div class="col-12 col-md-9">

时间改变我的编辑器配色方案。

事实上，如果有人在寻找，该行不需要col-12类。我只是绝望地把它放在那里。

为什么Bootstrap 4列没有占用其全部可用宽度？

1 个答案: