Question

我想使徽标具有响应性，因此我在img-reponsive标签类中添加了col-xs-12和img，并在外部样式表中也指定了width: 100%，但它是不起作用。

我在徽标的右边做了一个徽标，它放在笔记本电脑中，但在手机中不可见，因此我在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

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

Answer 2

Bootstrap img-fluid的img响应已更改为img-fluid

Answer 3

您是否尝试删除padding-left：200px;从移动媒体查询还具有position：fixed; float：right不是一个好习惯，需要使用img-fluid而不是img-respond。

引导程序“ img响应”在我的代码中不起作用，为什么？

3 个答案: