Bootstrap 4 导航栏折叠菜单，右侧列有元素

Question

我一直在尝试使用 Bootstrap 4 实现移动菜单。我的主要目标是在移动菜单的同一行中显示 3 个品牌文本和切换按钮。但不幸的是，当我单击切换按钮时，3 个品牌位于折叠菜单下方。即使在折叠菜单后，我也希望 3 个品牌与切换按钮一起保持在一排的顶部。我的问题是折叠菜单使用 100% 的列宽，这最终将 3 个品牌推到菜单下方。任何帮助将不胜感激。

目标解决方案

HTML

<body id="page-top">
 <nav class="navbar navbar-dark bg-primary navbar-fixed-top">
  <div class="container">

    <button class="navbar-toggler hidden-md-up pull-xs-right" data-target="#collapsenav" data-toggle="collapse" type="button">
            ☰
        </button>
    <div class="row">
        <div class="col-md-6 col-sm-12 col-xs-12">
             <div class="navbar-toggleable-sm collapse  text-xs-center" id="collapsenav">
                <ul class="nav navbar-nav">
                  <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                  <li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li>
                  <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                  <li class="nav-item"><a class="nav-link" href="#">Resume</a></li>
                </ul>
            </div>
        </div>
      <div class="col-md-2 col-sm-4 col-xs-4">
          <a class="navbar-brand" href="#home">Brand-1</a>
      </div>
      <div class="col-md-2 col-sm-4 col-xs-4">
          <a class="navbar-brand" href="#home">Brand-2</a>
      </div>
      <div class="col-md-2 col-sm-4 col-xs-4">
          <a class="navbar-brand" href="#home">Brand-3</a>
      </div>
    </div>
  </div>
</nav>   
</body> 

CODEPEN

Answer 1

尝试新的 Bootstrap 4 alpha 6 flexbox 实用程序进行对齐，并保持标记更简单：

http://www.codeply.com/go/OFXaPnKx2P

<nav class="navbar navbar-toggleable-sm navbar-inverse bg-primary fixed-top">
    <div class="container">
        <div class="d-flex w-100 justify-content-between flex-last">
            <button class="navbar-toggler align-self-end mb-1" data-target="#collapsenav" data-toggle="collapse" type="button">
                ☰
            </button>
            <div class="d-flex w-100 flex-first justify-content-between">
                <a class="navbar-brand" href="#home">Brand-1</a>
                <a class="navbar-brand" href="#home">Brand-2</a>
                <a class="navbar-brand" href="#home">Brand-3</a>
            </div>
        </div>
        <div class="navbar-collapse collapse w-100" id="collapsenav">
            <ul class="nav navbar-nav align-items-center">
                <li class="nav-item active"><a class="nav-link" href="#">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Resume</a></li>
            </ul>
        </div>
    </div>
</nav>

Demo

目前在 alpha 6 there is a bug 中，在小屏幕上导航栏内的 container 会缩小宽度。这将在测试版中得到修复，但在此之前，您只需要一点 CSS 即可在移动设备上保持内部容器全宽。

@media (max-width:767px) {
    .container {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

Answer 2

这3个品牌一定要在右边吗？

使用 Bootstrap，您只需在按钮和导航列表内容的 div 之间移动导航品牌链接，就可以轻松地将品牌放在左侧。这将使您的 3 个品牌保持原状，不会被推倒。

<body id="page-top">
 <nav class="navbar navbar-dark bg-primary navbar-fixed-top">
  <div class="container">
 <button class="navbar-toggler hidden-md-up pull-xs-right" data-target="#collapsenav" data-toggle="collapse" type="button">
            ☰
        </button>
    //move brand items here
    <a class="navbar-brand" href="#home">Brand-1</a>
    <a class="navbar-brand" href="#home">Brand-2</a>
    <a class="navbar-brand" href="#home">Brand-3</a>
    <div class="row">
        <div class="col-md-6 col-sm-12 col-xs-12">
             <div class="navbar-toggleable-sm collapse  text-xs-center" id="collapsenav">
                <ul class="nav navbar-nav">
                  <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                  <li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li>
                  <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                  <li class="nav-item"><a class="nav-link" href="#">Resume</a></li>
                </ul>
            </div>
        </div>
    //delete these out
      <div class="col-md-2 col-sm-4 col-xs-4">
          <a class="navbar-brand" href="#home">Brand-1</a>
      </div>
      <div class="col-md-2 col-sm-4 col-xs-4">
          <a class="navbar-brand" href="#home">Brand-2</a>
      </div>
      <div class="col-md-2 col-sm-4 col-xs-4">
          <a class="navbar-brand" href="#home">Brand-3</a>
      </div>
    </div>
  </div>
</nav>   
</body> 

如果您的三个品牌必须在右侧，那么我认为您将不得不做一些引导 CSS 工作，让品牌在大屏幕上显示，就像您在代码中最初的样子一样，然后隐藏在小屏幕上并显示我在上面添加的代码。例如：

<body id="page-top">
 <nav class="navbar navbar-dark bg-primary navbar-fixed-top">
  <div class="container">
 <button class="navbar-toggler hidden-md-up pull-xs-right" data-target="#collapsenav" data-toggle="collapse" type="button">
            ☰
        </button>
        //show these here on small screens
        <a class="navbar-brand" href="#home">Brand-1</a>
        <a class="navbar-brand" href="#home">Brand-2</a>
        <a class="navbar-brand" href="#home">Brand-3</a>
        <div class="row">
           <div class="col-md-6 col-sm-12 col-xs-12">
             <div class="navbar-toggleable-sm collapse  text-xs-center" id="collapsenav">
                <ul class="nav navbar-nav">
                  <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                  <li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li>
                  <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                  <li class="nav-item"><a class="nav-link" href="#">Resume</a></li>
                </ul>
            </div>
        </div>
    //show these below on large screens
      <div class="col-md-2 col-sm-4 col-xs-4">
          <a class="navbar-brand" href="#home">Brand-1</a>
      </div>
      <div class="col-md-2 col-sm-4 col-xs-4">
          <a class="navbar-brand" href="#home">Brand-2</a>
      </div>
      <div class="col-md-2 col-sm-4 col-xs-4">
          <a class="navbar-brand" href="#home">Brand-3</a>
      </div>
    </div>

我对编码还是比较陌生，所以我希望这会有所帮助！