Question

我在网站的标题部分包含以下内容：

徽标
登录，注册按钮
菜单
语言选择器

我想将它们放在一行中，但是问题是当我调整窗口大小时它们会彼此重叠，特别是登录按钮与徽标重叠，而语言选择器与主菜单重叠。

<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>

Answer 1

我将使用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）

调整窗口大小时元素相互重叠

1 个答案: