我在一个网站中有一个标题部分,其中包括:
我想让它们排成一行,但问题是当我调整窗口大小时它们相互重叠,特别是登录按钮与徽标重叠,语言选择器与主菜单重叠。
<div id="header-container" class="container">
<div id="header-container-nav" class="row align-items-center">
<div class="col-md-3">LOGO</div>
<div class="col-md-1">LOGIN BUTTONS</div>
<div class="col-md-5">MENU</div>
<div class="col-md-1">LANGUAGE</div>
</div>
</div>
而不是在这里使用引导程序,我会使用 flex
我会使用这个HTML
<div id="header-container-nav">
<div">LOGO</div>
<div>LOGIN BUTTONS</div>
<div>MENU</div>
<div>LANGUAGE</div>
</div>
和这个CSS
#header-container-nav {
display: flex;
}
现在你可以调整每个项目的大小(查看这篇文章http://javascriptkit.com/dhtmltutors/css-flexbox2.shtml)
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句