时间戳

首页 > 解决方案 > 我正在尝试使用 bootsrap4 创建一个粘性导航，但它无法正常工作

bootstrap-4 - 我正在尝试使用 bootsrap4 创建一个粘性导航，但它无法正常工作

问题描述

您好，我正在尝试使用 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

请检查我的代码

标签： bootstrap-4

解决方案

如果我正确理解了您的问题，那么您需要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>

代码笔

提示

这些主要是我的意见（请随意忽略它们），但您的代码确实可以使用清理。让我们看这个例子：

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

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

这是冗长且令人困惑的：

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

这三点特别适用于此代码示例，但也普遍适用于您的许多其他代码。牢记这些要点审查您的代码将有助于您的代码被他人和您自己维护/阅读。

推荐阅读