html - Bootstrap "img-responsive"为什么在我的代码中不起作用？

Question

我想让 Logo 响应，所以我添加了 img-reponsive和 col-xs-12在img标记类，还指定了 width: 100%在外部样式表中，但它不起作用。

我在右侧制作了 Logo ，它出现在笔记本电脑中，但在手机中不可见，所以我添加了 img-responsive在 <img>并指定 width: 100%和 height: auto;对于 img-responsive在外部样式表中，我还指定了 @media但它是一样的

#logo {
    padding-left: 380px;
    width: auto;
    height: 30%;
    position: fixed;
    float: right;
    border-bottom: 25px;
    padding-bottom: 25px;
    display: inline-block;
    top: -1em;
}
@media(max-width:568px) {
    #logo{
        float: right;
        padding-left: 300px;
        width: inherit;
        height: inherit;
        position: fixed;
    }
}
@media(max-width:767px) {
    #logo{
        float: right;
        padding-left: 200px;
        width: 100%;
        height: auto;
        position: fixed;
    }
}
.img-responsive{
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
}

<nav class="navbar navbar-default navbar-fixed-top d-flex">
    <div class="container">
        <div id="nav">
            <img src="images/logo.jpg" id="logo" class="img-responsive col-xs-12" />
        </div>
    </div>
</nav
    

Answer 1

如果您使用 bootstrap v4，您应该知道 img-responsive 已更改为 img-fluid，col-xs-12 已更改为 col-12 您可以查看站点文档 Bootstrap V4.2 docs