Bootstrap 4 菜单定位带图片
Bootstrap 4 menu positioning with image
我正在使用这个模板:
我想稍微修改一下菜单,而不是蓝色 Bootstrap 4 文本,我想在那里有一张图片。在我查看移动视图之前,它看起来一切正常。
我希望我的图片与文字位于同一位置:
然而我的图片恰好出现在汉堡菜单下:
这是我目前拥有的:
<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 标签替换了 Bootstrap 4:<img src='logo.png'/>
。我是 bootstrap 的新手,如果有人能帮我弄清楚如何解决这个问题,那就太好了。
根据需要为您的徽标图像调整 navbar-brand
class..
/* 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;
}
}
对于小型设备,我建议使用 bootstrap 类 将汉堡包和徽标分成相等的两部分。(col-xs-6)
<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>
我正在使用这个模板:
我想稍微修改一下菜单,而不是蓝色 Bootstrap 4 文本,我想在那里有一张图片。在我查看移动视图之前,它看起来一切正常。
我希望我的图片与文字位于同一位置:
然而我的图片恰好出现在汉堡菜单下:
这是我目前拥有的:
<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 标签替换了 Bootstrap 4:<img src='logo.png'/>
。我是 bootstrap 的新手,如果有人能帮我弄清楚如何解决这个问题,那就太好了。
根据需要为您的徽标图像调整 navbar-brand
class..
/* 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;
}
}
对于小型设备,我建议使用 bootstrap 类 将汉堡包和徽标分成相等的两部分。(col-xs-6)
<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>