Question

我的页面底部有一个漂亮的导航栏，中间有一个标识，可以将您带到主页，两侧有2个链接可以将您带到这些页面。我已经使用@media css在页面变小时使其变小，但是一旦你点击了xs / sm断点，它就太大了，无法适应屏幕。

例如：

| ------- -------视频| ------- -------关于| ------ LOGO /品牌----- - | ------ ------附表| -------- --------询问|

有没有办法让导航栏链接在两侧叠加在一起，这样我可以保持一个干净，对称的外观，中间的徽标而不是使它成为折叠的菜单按钮？

例如：

| ---- ----视频LOGO / BRAND ---- ----附表|

| ----关于--------------------------------询问------- |

Answer 1

如果您使用的是bootstrap v4，也许您可以在第1列和第3列中放置另一行，然后在该新行中放置两列（每个链接一列）。使用col-sm-12强制线条在小屏幕上包裹，然后使用col-md-6让它们在你变大时水平堆叠。不幸的是，它有很多嵌套的div。

Answer 2

您可以使用嵌套的Flex容器，并使用最少的代码实现所需的结果：

＆＃13;

.container, .left, .right {
  display:flex;
}

.left, .right {
  flex-wrap:wrap;
}

.container div, .left div, .right div {
  flex-grow:1;
  text-align:center;
  padding:0px 8px 0px 8px;
}

＆＃13;

<div class="container">
  <div class="left">
    <div>Video</div>
    <div>About</div>
  </div>
  <div class="logo">LOGO/BRAND</div>
  <div class="right">
    <div>Schedule</div>
    <div>Ask</div>
  </div>
</div>

＆＃13;

如何使我的导航栏像flexbox一样响应，在小断点处变成2行？

2 个答案: