合理的引导程序菜单

Question

我尝试做一个网站标题。徽标宽度= 405px。还有一个标题和下面的菜单，宽度相同（100％-405px）。

类似的东西：

菜单应该对齐 ...而且很可能引导程序不支持...

我尝试使用flex，但IE 11不支持...

这是 my fiddle code 和主要摘录：

<div class="cotnainer-fluid">

  <div class="header">
    <div class="logo"></div>
    <div class="top-header"> welcome and ...login right</div>
    <div class="menu">
      <nav class="navbar navbar-default">  ...  </nav>
    </div>
  </div>

  <div class="main container">...</div>
</div>

如何修复此代码为a）至少Chrome兼容，b）兼容IE11。

Answer 1

.logo需要一个display: inline-block，因此它不会强制它下面的其他元素（默认情况下，大多数浏览器都是display: block元素。）

接下来我建议将.top-header和.menu包装在div元素中，您可以在其中应用css calc以及左拉/右拉。

为了确保.top-header和.menu填充新容器，我还添加了width: 100%。

这是一个updated jsFiddle。

注意，现在涵盖了带有“登录”链接的链接和列表项，但这可能是一个单独的问题。