Question

我正在使用Bootstrap 4.2.1，在尝试使品牌出现在导航栏的右侧时遇到问题。它正出现在我想要的小视口中的位置（在汉堡的右侧），但是当扩展到更大的视口时，徽标显示在导航栏项目的左侧。我尝试使用navbar-right，pull-right，float：right，将徽标代码放置在navbar代码的各个位置，但是我无法使其显示在菜单的右侧。

我可能缺少明显的东西，但是关于如何使徽标显示在右侧的任何建议？ Here's the page。下面是代码示例。

<nav class="navbar fixed-top navbar-expand-lg navbar-custom">
  <div class="mx-auto d-lg-flex d-block flex-lg-nowrap">
    <!-- menu/hamburger button -->
    <button aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler custom-toggler" data-target="#navbarsExample11" data-toggle="collapse" type="button">Menu <span class="navbar-toggler-icon"></span></button> 
    <!-- logo -->
    <a class="navbar-brand navbar-right" href="index.html"><img alt="CCFAC logo" height="42" src="images/logoSM.png"></a> 
    <!-- end logo -->
    <div class="collapse navbar-collapse text-center" id="navbarsExample11">
      <ul class="navbar-nav align-items-center">
        <li class="nav-item active">
          <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown">
          <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown1" role="button">For Teens</a>
          <div aria-labelledby="navbarDropdown4" class="dropdown-menu">
            <a class="dropdown-item" href="marijuanaPrevention.html">Marijuana Prevention</a> <a class="dropdown-item" href="alcoholPrevention.html">Alcohol Prevention</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown2" role="button">For Parents</a> <span class="caret"></span>
          <div aria-labelledby="navbarDropdown4" class="dropdown-menu">
            <a class="dropdown-item" href="marijuanaPrevention.html">Marijuana Prevention</a> <a class="dropdown-item" href="alcoholPrevention.html">Alcohol Prevention</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="partners.html">For Teachers</a>
        </li>
        <li class="nav-item dropdown">
          <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown4" role="button">Our Initiatives</a>
          <div aria-labelledby="navbarDropdown4" class="dropdown-menu">
            <a class="dropdown-item" href="futureForward.html">Future Forward</a> <a class="dropdown-item" href="talkTheyHearYou.html">Talk. They Hear You.</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown5" role="button">Media</a>
          <div aria-labelledby="navbarDropdown4" class="dropdown-menu">
            <a class="dropdown-item" href="https://sacramentoccy.smugmug.com" target="_blank">Photos</a> <a class="dropdown-item" href="https://www.youtube.com/channel/UC5IR7O7WLAA8I-fHUfEYFXw" target="_blank">Videos</a> 
            <a class="dropdown-item" href="https://www.facebook.com/SacramentoCCY/" target="_blank">Facebook</a> 
            <a class="dropdown-item" href="#">Instagram</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="calendar.html">Calendar</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="aboutUs.html">About Us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

现在，您的徽标在汉堡按钮之后但在菜单之前解析。您只需要使徽标最后解析即可。

<nav class="navbar fixed-top navbar-expand-lg navbar-custom">
  <div class="mx-auto d-lg-flex d-block flex-lg-nowrap">
    <!-- menu/hamburger button -->
    <button aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler custom-toggler" data-target="#navbarsExample11" data-toggle="collapse" type="button">Menu <span class="navbar-toggler-icon"></span></button> 

    <div class="collapse navbar-collapse text-center" id="navbarsExample11">
      <ul class="navbar-nav align-items-center">
        <li class="nav-item active">
          <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown">
          <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown1" role="button">For Teens</a>
          <div aria-labelledby="navbarDropdown4" class="dropdown-menu">
            <a class="dropdown-item" href="marijuanaPrevention.html">Marijuana Prevention</a> <a class="dropdown-item" href="alcoholPrevention.html">Alcohol Prevention</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown2" role="button">For Parents</a> <span class="caret"></span>
          <div aria-labelledby="navbarDropdown4" class="dropdown-menu">
            <a class="dropdown-item" href="marijuanaPrevention.html">Marijuana Prevention</a> <a class="dropdown-item" href="alcoholPrevention.html">Alcohol Prevention</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="partners.html">For Teachers</a>
        </li>
        <li class="nav-item dropdown">
          <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown4" role="button">Our Initiatives</a>
          <div aria-labelledby="navbarDropdown4" class="dropdown-menu">
            <a class="dropdown-item" href="futureForward.html">Future Forward</a> <a class="dropdown-item" href="talkTheyHearYou.html">Talk. They Hear You.</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown5" role="button">Media</a>
          <div aria-labelledby="navbarDropdown4" class="dropdown-menu">
            <a class="dropdown-item" href="https://sacramentoccy.smugmug.com" target="_blank">Photos</a> <a class="dropdown-item" href="https://www.youtube.com/channel/UC5IR7O7WLAA8I-fHUfEYFXw" target="_blank">Videos</a> 
            <a class="dropdown-item" href="https://www.facebook.com/SacramentoCCY/" target="_blank">Facebook</a> 
            <a class="dropdown-item" href="#">Instagram</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="calendar.html">Calendar</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="aboutUs.html">About Us</a>
        </li>
      </ul>
    </div>
    <!-- logo -->
    <a class="navbar-brand navbar-right" href="index.html"><img alt="CCFAC logo" height="42" src="images/logoSM.png"></a> 
    <!-- end logo -->
  </div>
</nav>

使徽标显示在导航栏的右侧

1 个答案: