gpt4 book ai didi

html - Bootstrap img responsive,在导航栏中不会变小

转载 作者:太空宇宙 更新时间:2023-11-04 08:21:38 25 4
gpt4 key购买 nike

大家好,我有一个问题,我的 Logo 位于导航栏的左侧,而导航栏位于右侧。现在我正在缩小屏幕,我试图让图像看起来更小,这样导航文本和图像就不会相互重叠。所以基本上是一个响应式设计。但是由于某种原因,它似乎根本不起作用,

我已经使用了 boostrap 说要使用的 class="img-fluid 但它似乎在 Logo 上根本不起作用,所以在这个问题上的任何帮助都会很棒

Fiidle 链接:Here

我在导航栏上使用了 float,也许这就是问题所在?但是我还是不太确定如何使图像具有响应性并随着页面缩小而变小

P.S 正如你在 fiddle 中看到的,图像实际上只在窗口变得非常小时才开始缩小,几乎小于移动版本

HTML:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
<div class="logo"><img class="img-responsive" src="https://www.martialartsschoolsdirectory.com/logos/profile/checkmat-logo-burbank-ca-184.png"></div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">NAVBARA</a></li>
<li><a href="#">NAVBARA</a></li>
<li><a href="#">NAVBARA</a></li>
<li><a href="#">d</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">NAVBARA</a>
<ul class="dropdown-menu">
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
</ul>
</li>
<li><a href="#">9</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->

CSS:

.navbar-nav>li>a {
line-height: 6px;
}

.navbar-nav {
float: right;
margin-top: -15px;
}
.navbar {
padding-top: 53px;
font-size: 13px;
text-transform: uppercase;



}

.navbar-default {
background-color: transparent;
border-top: 0px solid rgba(0, 0, 0, 0.5);
border-bottom: 0px solid rgba(0, 0, 0, 0.5);
border-left: 0px solid rgba(0, 0, 0, 0.5);
border-right: 0px solid rgba(0, 0, 0, 0.5);
-webkit-transition: background-color 200ms linear;
-moz-transition: background-color 200ms linear;
-o-transition: background-color 200ms linear;
-ms-transition: background-color 200ms linear;
transition: background-color 200ms linear;
height: 87px;
}

.navbar-default .navbar-nav>li>a {
color: #ffffff;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: #F8BD23;
text-decoration: none;
color: #ffffff;
-webkit-transition: background-color 200ms linear;
-moz-transition: background-color 200ms linear;
-o-transition: background-color 200ms linear;
-ms-transition: background-color 200ms linear;
transition: background-color 200ms linear;
}

.navbar-nav > li{
padding-left:30px;

}

body {

background-color: black;
}

最佳答案

.logo img {width:100px;}

否则试试
在 img 标签内添加 width="100"

关于html - Bootstrap img responsive,在导航栏中不会变小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45489998/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com