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

巫婆

我在一个网站中有一个标题部分,其中包括:

  • 商标
  • 登录、注册按钮
  • 菜单
  • 语言选择器

我想让它们排成一行,但问题是当我调整窗口大小时它们相互重叠,特别是登录按钮与徽标重叠,语言选择器与主菜单重叠。

<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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

调整浏览器窗口大小时,li元素重叠

来自分类Dev

调整窗口大小时如何避免导航栏元素重叠?

来自分类Dev

窗口右侧的元素与窗口调整大小重叠

来自分类Dev

调整窗口元素大小时移动

来自分类Dev

调整窗口大小时防止元素换行

来自分类Dev

在窗口调整大小时隐藏元素

来自分类Dev

调整窗口大小时如何实时检测元素高度?

来自分类Dev

调整窗口大小时在Bootstrap网格内居中的元素

来自分类Dev

vuejs在窗口调整大小时获取参考元素的高度

来自分类Dev

调整窗口大小时如何保持元素居中

来自分类Dev

调整窗口大小时,如何使特定元素最后减少?

来自分类Dev

在 Bootstrap 中调整窗口大小时停止元素移动

来自分类Dev

CSS-如何在调整窗口大小时使高度为100%的div不与内容重叠

来自分类Dev

仅在调整窗口大小时防止div重叠(带有样式组件)

来自分类Dev

每次在Chrome上调整窗口大小时,图像都会随之移动,从而使文本重叠

来自分类Dev

调整大小时div容器与<p>重叠

来自分类Dev

调整大小时,引导网格列重叠

来自分类Dev

调整大小时Bootstrap列重叠

来自分类Dev

调整大小时混乱的元素

来自分类Dev

调整浏览器大小时如何防止UI元素彼此重叠?

来自分类Dev

当我调整浏览器大小时,元素与图像重叠

来自分类Dev

调整父元素大小时,使用内联块的 Div 会重叠

来自分类Dev

CSS - 在 Wordpress 中重新调整大小时,元素不会相互堆叠

来自分类Dev

调整窗口大小时保持圆圈的长宽比

来自分类Dev

调整大小时不要重绘窗口

来自分类Dev

调整窗口大小时布局变形

来自分类Dev

从左侧调整大小时窗口闪烁

来自分类Dev

调整窗口大小时对齐方式更改

来自分类Dev

调整窗口大小时删除<br />标签

Related 相关文章

  1. 1

    调整浏览器窗口大小时,li元素重叠

  2. 2

    调整窗口大小时如何避免导航栏元素重叠?

  3. 3

    窗口右侧的元素与窗口调整大小重叠

  4. 4

    调整窗口元素大小时移动

  5. 5

    调整窗口大小时防止元素换行

  6. 6

    在窗口调整大小时隐藏元素

  7. 7

    调整窗口大小时如何实时检测元素高度?

  8. 8

    调整窗口大小时在Bootstrap网格内居中的元素

  9. 9

    vuejs在窗口调整大小时获取参考元素的高度

  10. 10

    调整窗口大小时如何保持元素居中

  11. 11

    调整窗口大小时,如何使特定元素最后减少?

  12. 12

    在 Bootstrap 中调整窗口大小时停止元素移动

  13. 13

    CSS-如何在调整窗口大小时使高度为100%的div不与内容重叠

  14. 14

    仅在调整窗口大小时防止div重叠(带有样式组件)

  15. 15

    每次在Chrome上调整窗口大小时,图像都会随之移动,从而使文本重叠

  16. 16

    调整大小时div容器与<p>重叠

  17. 17

    调整大小时,引导网格列重叠

  18. 18

    调整大小时Bootstrap列重叠

  19. 19

    调整大小时混乱的元素

  20. 20

    调整浏览器大小时如何防止UI元素彼此重叠?

  21. 21

    当我调整浏览器大小时,元素与图像重叠

  22. 22

    调整父元素大小时,使用内联块的 Div 会重叠

  23. 23

    CSS - 在 Wordpress 中重新调整大小时,元素不会相互堆叠

  24. 24

    调整窗口大小时保持圆圈的长宽比

  25. 25

    调整大小时不要重绘窗口

  26. 26

    调整窗口大小时布局变形

  27. 27

    从左侧调整大小时窗口闪烁

  28. 28

    调整窗口大小时对齐方式更改

  29. 29

    调整窗口大小时删除<br />标签

热门标签

归档