为什么 Bootstrap 4 中的 img-fluid class 没有在它们的 div 中调整我的图像大小？

Question

我这里有一个 Bootply 游乐场示例： https://www.bootply.com/eXlkXkUvDJ

我试图对齐底部的三个图像，以便最左边和最右边的图像与主图像和标题齐平。 我还希望图像完全填满 div——我用黑色突出显示了第一个图像 div，这样您就可以看到图像没有完全填满它。

我检查了 Bootstrap 4 文档，它看起来像 'img-fluid' class 应该使图像填充每个 div，但这并没有发生。

这是我的 HTML 代码：

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aisha Wells Portfolio</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div class="container" alt="this is the main container">
    <div class="row">
        <div class="col-md-6" alt="udacity logo">
            <img src="http://cdn.onlinewebfonts.com/svg/img_369247.png" alt="fake logo" width="50" height="50" class="img-responsive">
        </div>
        <div class="col-md-6 text-right text-uppercase" alt="my name">
                <h1> Shere Wells </h1>

                <h3> Writer and Filmmaker </h3>

        </div>
    </div>
</div>
<div class="container" alt="this is the main container">
    <div class="row">
        <div class="col-md-12 rule">
            <hr>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 main-img" alt="this is the main image">
            <img class="img-fluid" src="http://www.placepuppy.net/400/250" width="100%">
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
                <h4>Featured Work</h4>

        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-4 first" alt="First project image">
                <img class="img-fluid" src="https://placekitten.com/250/250" alt="kitteh">
                    <h5>First Name</h5>

            </div>
            <div class="col-md-4 second" alt="Second project image">
                <img class="img-fluid" src="https://placekitten.com/250/250" alt="kitteh">
                    <h5>Second Name</h5>

            </div>
            <div class="col-md-4 third" alt="Third project image">
                <img class="img-fluid" src="https://placekitten.com/250/250" alt="kitteh">
                    <h5>Third Name</h5>

            </div>
        </div>
    </div>
</div>
<div id="push"></div>

这是我的 CSS 代码：

/* CSS used here will be applied after bootstrap.css */

@charset "UTF-8"; 
/*CSS Document for My Portfolio Page*/

h1 { 
    color: #2d3c49; 
    float: right; 
    font-family: 'Montserrat', sans-serif;
}

h3 {
    color:#7d97ad;
    float: right;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;

}

h4 {
    color:#7d97ad;
    font-family: 'Montserrat', sans-serif;

}

h5 {
    color:#7d97ad; 
    font-family: 'Montserrat', sans-serif;
}

hr {
    border-top-style: solid;
    border-top-width: thick;
    border-top-color:#7d97ad; 
    padding-top:20px;

  }

.first {
    background-color:black; 

}

.col-md-6 {
    background-color:black; 

}

Answer 1

在img标签上添加w-100类

<img class="w-100 img-fluid" src="https://placekitten.com/250/250" alt="kitteh">

同时在小猫行开始之前删除第二个“容器”div。

容器内不需要另一个容器。

Bootply链接

Answer 2

检查此链接并告诉我

这基本上我们必须使用媒体查询css