<img> 在引导网格中不是 100% 宽度？

Question

这是技术上非常简单的代码，显示两个图像彼此相邻：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
crossorigin="anonymous">
<div class="container-fluid">
    <div class="row">
      <div class="col-md-3" style="background-color: black;" >
        <img src="https://via.placeholder.com/518x278.jpg" class="img-fluid" style="margin: 0px; padding: 0px;">
      </div>
      <div class="col-md-9" style="background-color: yellow;">
        <img src="https://via.placeholder.com/1411x278.jpg" style="width: 100%;">
      </div>
    </div>
  </div>

但是，图像不会 100% 填充col容器宽度(从仍然可见的背景颜色中可以看出？为什么他们不伸展以填充容器？

我尝试将margin设置为0px并明确说明width: 100%;如您所见，但它不起作用。除了 Boostrap 默认的最小.css之外，我没有其他格式。

Answer 1

col-md-3和col-md-9都有15px填充。

将no-gutters添加到行div 将删除填充。

Answer 2

为什么他们不伸展以填充容器？

这是因为引导行通常包含装订线。(这意味着一行中的每一列都有 15px 的左右填充(

将类no-gutters添加到行中以删除装订线。

并将 px-0 类添加到容器中，以根据需要删除容器上的水平填充。