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>

然而，图像没有填充col容器宽度100％（由于仍然可见的背景颜色明显？为什么不伸展以填充容器？

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

Answer 1

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

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

Answer 2

为什么他们没有伸展来填充容器？

那是因为Bootstrap行通常有排水沟。（这意味着一行中的每列都有15px左右填充）

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

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

Bootstrap网格中<img/>不是100％宽度？

2 个答案: