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>

如果你的三个品牌必须在右边，那么我认为你必须做一些bootstrap 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>

我对编码仍然比较新，所以我希望这有帮助！

Bootstrap 4导航栏折叠菜单，右栏上的元素

2 个答案: