Question

您好，我正在尝试使用Bootstrap 4粘性导航在所有页面上浮动它，但是它无法正常工作。下面是相同代码段

<nav class="navbar navbar-expand-md navbar-dark  sticky-top">
  <!-- One of the primary actions on mobile is to call a business - This displays a phone button on mobile only -->
  <a class="navbar-brand ml-3 small-screen" href="#" style="padding: 10px">
    <img src="http://www.510families.com/sites/default/files/imagecache/480px-wide/iciicecream.jpg" style="width: 90px;height: 80px;">
  </a>
  <div class="navbar-toggler-right">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
  <div class="collapse navbar-collapse flex-column " id="navbar">

    <ul class="navbar-nav  w-100 justify-content-center nav1 px-3" style="padding:0px!important">
      <li style="padding-right:30px; background-color: #922C7F">
        <a class="nav-link" href="#">BOOK AN APPOINTMENT</a>
      </li>
      <li style="padding-right:35px; background-color: #7B2068">
        <a class="nav-link" href="#">BOOK A Table</a>
      </li>
      <li style="padding-right:40px; background-color: #631053">
        <a class="nav-link" href="#">FIND A Person</a>
      </li>
      <li style="padding-right:8px; background-color: #ED1C24">
        <a class="nav-link" href="#" style="padding-right:0px;">
          <i class="fas fa-phone-square" style="font-size: 20px;color:black"></i>&nbsp Contact
          <span style="font-weight: bold">617 98 22344</span>
        </a>
      </li>
      <li style="padding-right:32px; background-color: #922C7F">
        <a class="nav-link" href="#">search</a>
      </li>
    </ul>

    <ul class="navbar-nav justify-content-center w-100 nav2 px-3" style="padding:0px">
      <li class="nav-item ">
        <a class="nav-link nav-menu2" href="#" style="font-weight: bold;font-size: 14px">WHY ME?
          <span style="padding: 3px">|</span>
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link nav-menu2 dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="font-weight: bold;font-size: 14px">OUR SPECIALITIES</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item ">
        <a class="nav-link nav-menu2" href="#" style="font-weight: bold;font-size: 14px">
          <span style="padding: 3px">|</span> FOR PERSONS
          <span style="padding: 3px">|</span>
        </a>
      </li>
      <li class="nav-item ">
        <a class="nav-link nav-menu2" href="#" style="font-weight: bold;font-size: 14px">
          FOR PROFESSIONALS
          <span style="padding: 3px">|</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link nav-menu2" href="#" style="font-weight: bold;font-size: 14px">
          CAREERS
          <span style="padding: 3px">|</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link nav-menu2" href="#" style="font-weight: bold;font-size: 14px">
          REACH US
        </a>
      </li>
    </ul>
  </div>
</nav>

我想将徽标和导航栏浮动到整个页面。我该如何实现？我的导航栏应该在图像上，并且会有两个导航栏，所以我创建了两个ul

Please check my code

Answer 1

如果我正确理解了您的问题，则需要将navbar-brand放在navbar内。

代码修复

<div class="container" style="padding: 0px">

    <div class="image-container">
        <nav class="navbar navbar-expand-md navbar-dark  sticky-top">
          <a class="navbar-brand ml-3 large-screen" href="#" style="float: left;background-color: white;padding: 10px">
              <img src="http://www.510families.com/sites/default/files/imagecache/480px-wide/iciicecream.jpg" style="width: 150px;height: 130px;;">
          </a>


            <!-- One of the primary actions on mobile is to call a business - This displays a phone button on mobile only -->
            <a class="navbar-brand ml-3 small-screen" href="#" style="padding: 10px">
                <img src="http://www.510families.com/sites/default/files/imagecache/480px-wide/iciicecream.jpg" style="width: 90px;height: 80px;">
            </a>

旧代码

<div class="container" style="padding: 0px">

    <div class="image-container">
        <a class="navbar-brand ml-3 large-screen" href="#" style="float: left;background-color: white;padding: 10px">
            <img src="http://www.510families.com/sites/default/files/imagecache/480px-wide/iciicecream.jpg" style="width: 150px;height: 130px;;">
        </a>

        <nav class="navbar navbar-expand-md navbar-dark  sticky-top">
            <!-- One of the primary actions on mobile is to call a business - This displays a phone button on mobile only -->
            <a class="navbar-brand ml-3 small-screen" href="#" style="padding: 10px">
                <img src="http://www.510families.com/sites/default/files/imagecache/480px-wide/iciicecream.jpg" style="width: 90px;height: 80px;">
            </a>

CodePen

提示

这些主要是我的看法（可以忽略它们），但是您的代码可以真正使用清除功能。让我们举个例子：

@media (min-width: 768px) {
    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
        border-radius: 0;
    }
}

@media (min-width: 768px) {
    .small-screen {
        display: none;
    }
}

这是冗长而令人困惑的：

将.small-screen与.dropdown:hover .dropdown-menu合并在同一目录下 @media (...)媒体规则。
@media (min-width: 768px)适用于大于768像素的更大屏幕，但是您将.small-screen类应用于这些较大的屏幕。至少，这令人困惑。
使用更多的引导实用程序将有助于提高可读性和简洁性。在这种情况下，d-md-none可以代替.small-screen类。

这三点专门适用于此代码示例，但通常也适用于您的许多其他代码。考虑到这些要点来审查您的代码将有助于他人和您自己维护/读取您的代码。

我正在尝试使用bootsrap4创建粘性导航，但无法正常工作

1 个答案:

代码修复

旧代码

提示