导航栏导航栏品牌跳转到导航栏菜单下方
问题描述:
我有一个bootstrap导航栏品牌,当窗口被调整大小(较小)时,它会跳下(向下移动)以尊重其原始位置。这是因为在调整窗口大小时,右侧的导航栏菜单(三个水平条)与导航栏品牌合拢。导航栏品牌内的徽标采用svg格式。如何调整导航栏品牌以便它不会跳到下面?导航栏导航栏品牌跳转到导航栏菜单下方
菜单的html代码:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <!-- end button navbar -->
<a class="navbar-brand" href="index.php"><img src="loghi/logo.svg"></a>
</div><!-- end navbar-header -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.php">Home</a></li>
<li><a href="chi_siamo.php">Chi Siamo</a></li>
<li><a href="listini.php">Listini</a></li>
<li><a href="contatti.php">Contatti</a></li>
<li><a href="disclaimer.php">Disclaimer</a></li>
</ul>
</div> <!-- end collapse navbar-collapse -->
</div> <!-- end container menu -->
</nav> <!-- end navbar -->
<!-- Carousel -->
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/img_1.jpg" alt="First slide">
</div>
<div class="item">
<img src="img/img_2.jpg" alt="Second slide">
</div>
<div class="item">
<img src="img/img_3.jpg" alt="Third slide">
</div> <!-- end item -->
</div> <!-- end carousel-inner -->
</div> <!-- end carousel-example generic -->
</div> <!-- end container -->
<!-- /carousel -->
这是CSS代码(的一部分):
/****************/
/* BOOTSTRAP CSS*/
/****************/
.navbar {
min-height: 80px;
background-color: #FFFFFF;
border: 1px solid;
}
.navbar-brand {
padding: 0 15px;
height: 80px;
line-height: 80px;
border: 1px solid;
}
.navbar-toggle {
/* (80px - button height 34px)/2 = 23px */
margin-top: 23px;
padding: 9px 10px !important;
}
@media (min-width: 768px) {
.navbar-nav > li > a {
/* (80px - line-height of 27px)/2 = 26.5px */
padding-top: 26.5px;
padding-bottom: 26.5px;
line-height: 27px;
}
}
.navbar-brand img {
height: 80px;
border: 1px solid;
}
.nav.navbar-nav.navbar-right a{
font-size: 14px;
}
.nav.navbar-nav.navbar-right li a:hover {
font-weight: bold;
color: #eb0c0c;
}
编辑:正如你从照片中可以看到,第一个和第二个是好的,但第三个不是..
答
如果它只发生在较小的屏幕上,则可以使用媒体查询,以便在较小的屏幕上更改图像的宽度/高度。
(代码,您提供的工作)
@media (max-width: 420px) {
.navbar-brand {
width: 70%;
}
}
+0
是的,这就是我所做的,谢谢:) –
做了'Navbar的brand'与媒体查询较小。获取它打破的宽度并添加媒体查询以使其更小。 – Arthur
谢谢!它工作,我用这个简单的代码来解决问题: @media(max-width:420px){ .navbar-brand {width:70%; } } –
我发布了这个答案,所以你可以标记为解决:) – Arthur