你可以看到,
| Nav --- Logo --- Info |
这是我想要在移动设备上使用的样式。
导航左对齐。
Logo 居中对齐。
信息右对齐。
<div id="navbar">
<div class="item">Nav</div>
<div class="item">Logo</div>
<div class="item">Info</div>
</div>
我必须为每个元素实现什么样式才能获得我想要的东西?
拜托,谢谢。
最佳答案
到目前为止,实现这一目标的最简单方法是使用 flexbox
。要将其限制在移动设备上,您需要将其包装在 @media
查询中,对于 Bootstrap,该查询低于 768px
#navbar {
/*
* place non-mobile styles here
* For example, to hide the navbar outside mobile...
*/
display: none;
}
@media (max-width: 767px) {
#navbar {
display:flex;
justify-content: space-between;
align-items: center; /* optional, to center vertically */
}
}
<div id="navbar">
<div class="item">Nav</div>
<div class="item">Logo</div>
<div class="item">Info</div>
</div>
关于html - 我想通过 css 创建以下菜单样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44529349/