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

回应拉斐尔对你的问题的评论，我不完全确定是否可以使用Bootstrap的样式解决问题（除了重复内容，因为你已经显示） ）。

忽略Bootstrap，如果您只需要支持IE11 +，则可以使用CSS Grid来实现您所描述的布局。我没有足够的使用Bootstrap的经验来了解这个解决方案在Bootstrap风格中的表现如何，但这里是使用纯CSS网格实现布局的准系统示例（支持IE需要添加额外的我为了简洁而遗漏的风格：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

可以使用Bootstrap 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>