Css 带图像的引导4菜单定位
我正在使用此模板: 我想稍微修改一下菜单,而不是蓝色的bootstrap4文本,我想在那里有一个图像。在我看到移动视图之前,一切都很好 我希望我的图像与文本位于同一位置: 但是,我的图像恰好出现在汉堡菜单下: 这就是我目前的情况:Css 带图像的引导4菜单定位,css,twitter-bootstrap,twitter-bootstrap-4,Css,Twitter Bootstrap,Twitter Bootstrap 4,我正在使用此模板: 我想稍微修改一下菜单,而不是蓝色的bootstrap4文本,我想在那里有一个图像。在我看到移动视图之前,一切都很好 我希望我的图像与文本位于同一位置: 但是,我的图像恰好出现在汉堡菜单下: 这就是我目前的情况: <nav id='topNav' className='navbar navbar-default navbar-fixed-top'> <div className='container'> <button class
<nav id='topNav' className='navbar navbar-default navbar-fixed-top'>
<div className='container'>
<button className='navbar-toggler hidden-md-up pull-right' type='button' data-toggle='collapse' data-target='#collapsingNavbar'>
☰
</button>
<a className='navbar-brand page-scroll' href='#first'><img src='logo.png'/></a>
<div className='collapse navbar-toggleable-sm' id='collapsingNavbar'>
<ul className='nav navbar-nav'>
<li className='nav-item'>
<a className='nav-link page-scroll' href='#one'>Cards</a>
</li>
<li className='nav-item'>
<a className='nav-link page-scroll' href='#two'>Flexbox</a>
</li>
<li className='nav-item'>
<a className='nav-link page-scroll' href='#three'>5 Tiers</a>
</li>
<li className='nav-item'>
<a className='nav-link page-scroll' href='#four'>More</a>
</li>
</ul>
<ul className='nav navbar-nav pull-xs-right'>
<li className='nav-item'>
<a className='nav-link page-scroll' data-toggle='modal' title='A free Bootstrap theme' href='#aboutModal'>About</a>
</li>
</ul>
</div>
</div>
</nav>
☰
-
-
-
-
-
我刚刚用这个img标签替换了bootstrap4:
。我对bootstrap很陌生,如果有人能帮我解决这个问题,那就太好了。根据您的徽标图像需要调整navbar brand
类
/* responsive nav */
@media(max-width:48em) {
.navbar-default .navbar-nav>.nav-item {
float: none;
margin-left: .1rem;
}
.navbar-default .navbar-nav {
float:none !important;
}
.navbar-default .navbar-brand {
float:none;
}
.navbar-default .navbar-brand img {
display:inline;
}
}
我建议使用小型设备的引导类将汉堡和徽标分成两个相等的部分。(col-xs-6)
☰
您可以制作JSFIDLE或plnkr吗?我们见不到你的时候很难帮上忙。
<div class="col-xs-12">
<div class="col-xs-6">
<button className='navbar-toggler hidden-md-up' type='button' data-toggle='collapse' data-target='#collapsingNavbar'>
☰
</button>
</div>
<div class="col-xs-6">
<a className='navbar-brand page-scroll' href='#first'><img src='logo.png'/></a>
</div>
</div>