html - Bootstrap 导航栏换行到第二行
问题描述
我正在使用 Bootstrap 制作导航栏,我的精简菜单总是换行,即使上面的行应该有空间。这在添加徽标(代替红色块)时开始发生。
.logo-scrollbar {
width: 30%;
}
#mainNav {
border-bottom: 1px solid rgba(33, 37, 41, 0.1);
background-color: #fff;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
#mainNav .navbar-brand {
font-weight: 700;
text-transform: uppercase;
color: #12AEA1;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}
#mainNav .navbar-nav > li.nav-item > a.nav-link,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
font-size: .9rem;
font-weight: 700;
text-transform: uppercase;
color: #212529;
}
@media (min-width: 992px) {
#mainNav .navbar-nav > li.nav-item > a.nav-link {
padding: 0.5rem 1rem;
}
#mainNav.navbar-shrink {
border-bottom: 1px solid rgba(33, 37, 41, 0.1);
background-color: #fff;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" class="logo-scrollbar" alt="logo image">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#team">Team</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
什么会导致这种情况?
解决方案
似乎.logo-scrollbar
在内部以百分比形式设置 img 的宽度存在问题a .navbar-brand
,您有 3 个选项
1-覆盖.navbar-brand
to的显示display: contents;
.logo-scrollbar {
width: 30%;
}
#mainNav {
border-bottom: 1px solid rgba(33, 37, 41, 0.1);
background-color: #fff;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
#mainNav .navbar-brand {
font-weight: 700;
text-transform: uppercase;
color: #12AEA1;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
display: contents; /* add this */
}
#mainNav .navbar-nav > li.nav-item > a.nav-link,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
font-size: .9rem;
font-weight: 700;
text-transform: uppercase;
color: #212529;
}
@media (min-width: 992px) {
#mainNav .navbar-nav > li.nav-item > a.nav-link {
padding: 0.5rem 1rem;
}
#mainNav.navbar-shrink {
border-bottom: 1px solid rgba(33, 37, 41, 0.1);
background-color: #fff;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" class="logo-scrollbar" alt="logo image">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#team">Team</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
.logo-scrollbar
2-设置宽度px
3-设置width: 30%;
to.navbar-brand
和width:100%
to.logo-scrollbar
推荐阅读
- javascript - 导入react的方式有什么问题
- jmeter - ULP Video Streaming Sampler 是否支持 mp4 视频格式?
- c++ - 为什么编译器资源管理器上的 Visual Studio 会忽略异常模型设置?
- javascript - 跨页面存储 DeviceOrientationEvent 和 DeviceMotionEvent 权限
- java - 无法在jsp中下载.xlsx文件
- javascript - 有效地保存 Numpy 数组并在 Javascript 中作为 TypedArray 加载
- node.js - Nodejs等待/异步问题
- windows - 我可以在 Windows 上手动选择 .ssh 默认文件夹吗?
- javascript - 缩放类添加到滑块中的所有图像而不检查“li”是否处于活动状态
- javascript - 覆盖窗口上的函数