Question

我想创建一个类似于this的菜单（尝试在移动模式下）：

在＆＃34;桌面＆＃34;模式，我想要左侧的品牌标识和其他单词，以及右侧的菜单。在＆＃34;移动＆＃34;模式，我会用一个带有徽标和其他单词的块，并且在菜单下面应该占据整行。

有任何建议可以获得此结果吗？

正如您所看到的，我定义了一些CSS ID，只是为了：

display:block

一个用于徽标的容器+单词（在左侧），一个用于菜单的容器（在右侧）。

它不能像我一样工作，因为我不知道如何在移动模式下将菜单放在品牌名称下面。

Answer 1

我希望这是您正在寻找的结果：

要添加的CSS

@media screen and (max-width: 768px) {
  #logo {
    display: inline-block;
    float: none;
    width:100%;
    text-align:center;
  }
  #nav-logo {
    display: inline-block;
    float: none;
    width:100%;
    text-align:center;
  }
  .navbar-header button {
    float:none;
    margin:15px 0px;
  }
}

JSFiddle example

如果您需要上面的菜单，请反转html块id="nav-logo"和id="logo" ... the updatade JSFiddle here.

徽标下方的菜单

1 个答案: