Flexbox Bootstrap 4 Navbar带有额外的内容，垂直对齐，始终可见

Question

挑战：创建一个导航栏，左侧带有品牌徽标，导航栏折叠菜单和其他一些号召性用语/链接位于对，并把它们全部垂直放置。

似乎直线前进，直到你想移动到这个样子：

我们怎样才能有良好的响应CSS实现这一点（没有切缘阴性/绝对定位技术）并没有JS？

我只有拿出打印的电话号码两次在页面上的选项，隐藏/显示各种屏幕尺寸：

<header> 
    <div class="content-above-navbar container"> 
    <div class="row d-md-none flex-row-reverse"> 
     <div class="col-auto ml-3"><span class="navbar-text">800-BS4-WEBS</span></div> 
     <div class="col-auto p-0"><span class="navbar-text"><a href="#">Contact Us</a></span></div> 
    </div> 
    </div> 
    <nav class="navbar navbar-expand-md navbar-light bg-light"> 
    <div class="container"> 

     <a class="navbar-brand" href="Bootstrap 4 Navbar">Bootstrap 4 Navbar</a> 

     <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#all-pages-176" aria-controls="all-pages-176" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> 

     <div id="all-pages-176" class="navbar-collapse has-content-above collapse"> 
     <div class="content-above-nav-menu"> 
      <div class="float-md-right ml-md-3 d-none d-md-block"><span class="navbar-text">800-BS4-WEBS</span></div> 
      <div class="float-md-right d-none d-md-block"><span class="navbar-text"><a href="#">Contact Us</a></span></div> 
     </div> 
     <ul id="menu-all-pages" class="navbar-nav ml-auto"> 
      <li id="menu-item-1700" class="nav-item active"><a href="/sample-page/" class="nav-link active">Sample Page</a></li> 
      <li id="menu-item-1701" class="nav-item"><a href="/about/page-markup-and-formatting/" class="nav-link">Page Markup And Formatting</a></li> 
      <li id="menu-item-1702" class="nav-item"><a href="/about/page-image-alignment/" class="nav-link">Page Image Alignment</a></li> 
      <li id="menu-item-1705" class="nav-item"><a href="/level-1/" class="nav-link">Level 1</a></li> 
     </ul> 
     </div> 
    </div> 
    </nav> 
</header> 

有自定义CSS的一点点，使非菜单信息堆叠起来并移动到右侧。看到小提琴链接：

Here's a Fiddle

其他标记为一个屏幕大小的工作，而不是其他。

是否有人看到一个解决方案，可以实现相对平坦的标记？

Answer 1

回应Raphael对您问题的评论，我不完全确定问题是否可以使用Bootstrap的样式解决（除了重复内容，如您所示）。

忽略Bootstrap，如果您只需要支持IE11 +，则可以使用CSS Grid来实现您所描述的布局。我没有足够的Bootstrap经验来了解这个解决方案如何与Bootstrap的风格搭配使用，但是这里有一个用纯CSS网格实现的布局示例（支持IE需要添加我为了简洁而省略的其他样式）：

.header { 
 
    margin: 1em; 
 
    padding: 1em; 
 
    display: grid; 
 
    grid-template-rows: auto auto; 
 
    grid-template-columns: 1fr auto; 
 
    grid-template-areas: 
 
    "c c" 
 
    "l t" 
 
} 
 
.header__logo { 
 
    grid-area: l; 
 
} 
 
.header__contact { 
 
    grid-area: c; 
 
    justify-self: end; 
 
} 
 
.header__menu { 
 
    display: none; 
 
} 
 
.header__toggle { 
 
    grid-area: t; 
 
    margin-left: 1em; 
 
    align-self: center; 
 
} 
 

 
@media (min-width:768px) { 
 
    .header { 
 
    grid-template-rows: auto auto; 
 
    grid-template-columns: auto 1fr; 
 
    grid-template-areas: 
 
     "l c" 
 
     "l m" 
 
    } 
 
    .header__toggle { 
 
    display: none; 
 
    } 
 
    .header__contact { 
 
    align-self: center; 
 
    } 
 
    .header__menu { 
 
    display: flex; 
 
    grid-area: m; 
 
    align-self: center; 
 
    justify-self: end; 
 
    } 
 
} 
 

 
/* debug styles */ 
 
.header { 
 
    border: 1px solid red; 
 
} 
 
.header > * { 
 
    outline: 1px dashed #cf0; 
 
}

<div class="header"> 
 
    <a href="#" class="header__logo"><img src="http://via.placeholder.com/200x80&text=Brand+Logo"/></a> 
 
    <div class="header__contact"> 
 
    Contact Us <a href="#">800-BS4-WEBS</a> 
 
    </div> 
 
    <button class="header__toggle">=</button> 
 
    <div class="header__menu"> 
 
    <a href="#">Sample Page</a> 
 
    <a href="#">Another Page</a> 
 
    </div> 
 
</div>

Answer 2

它可以与引导4网格和效用类做...

演示：https://www.codeply.com/go/CBsBPCE4oV

<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
    <div class="container"> 
     <div class="row w-100 no-gutters d-lg-block d-flex flex-wrap justify-content-between"> 
      <a class="navbar-brand col-lg-3 col-6 py-lg-3 order-lg-1 order-2 float-left d-block h-100" href="Bootstrap 4 Navbar"> 
       Logo 
      </a> 
      <div class="navbar-text col-lg-6 col-12 order-lg-2 order-1 text-right float-right align-self-end">800-BS4-WEBS</div> 
      <button class="navbar-toggler collapsed float-right order-3" type="button" data-toggle="collapse" data-target="#all-pages-176" aria-controls="all-pages-176" aria-expanded="false" aria-label="Toggle navigation"> 
       <span class="navbar-toggler-icon"></span> 
      </button> 
      <div id="all-pages-176" class="navbar-collapse collapse float-right col-lg-8 order-4"> 
       <ul id="menu-all-pages" class="navbar-nav ml-auto justify-content-lg-end w-100"> 
        <li id="menu-item-1700" class="nav-item active"><a href="/sample-page/" class="nav-link active">Sample Page</a></li> 
        <li id="menu-item-1701" class="nav-item"><a href="/about/page-markup-and-formatting/" class="nav-link">Page Markup And Formatting</a></li> 
        <li id="menu-item-1702" class="nav-item"><a href="/about/page-image-alignment/" class="nav-link">Page Image Alignment</a></li> 
        <li id="menu-item-1705" class="nav-item"><a href="/level-1/" class="nav-link">Level 1</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</nav>