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

【问题标题】：Why is Bootstrap 4 column not taking its full available width?为什么 Bootstrap 4 列没有占用其全部可用宽度？
【发布时间】：2018-04-08 15:04:40
【问题描述】：

我的页面结构如下：

<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”断点向上的列布局，以及下方的堆叠布局，这确实是我得到的。但是第二个 'col' 永远不会延伸到父 'row' 容器的右边缘，我不明白为什么 Bootstrap 文档中的所有示例都准确地表明了这种情况应该发生。

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

我错过了什么？

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

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

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

当然应该是

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

是时候改变我的编辑器配色方案了。

事实上，该行不需要col-12 类，以防万一有人在查看。我只是绝望地把它放在那里。

【讨论】：