Question

我在网站上使用Bootstrap导航栏进行了以下设计。它可以完美运行，但包括社交链接和徽标在内的项目未在移动设备中显示。

我应该去给每个类和id添加@media(min-max width)还是我可能会错误地更改它的其他简单方式

.navbar-header.col {
  padding: 0 !important;
}

.navbar-default .navbar-toggle {
  border-color: transparent;
}

.navbar {
  background: #fff;
  padding-left: 16px;
  padding-right: 16px;
  border-bottom: 1px solid #d6d6d6;
  box-shadow: 0 0 4px rgba(0, 0, 0, .1);
  margin-bottom: 0px;
  margin-top: 15px;
}

.nav-link img {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  margin: -8px 0;
  float: left;
  margin-right: 10px;
}

.navbar ul.nav li a:hover,
.navbar ul.nav li a:focus {
  color: #f08373 !important;
}

.navbar ul.nav li.active a,
.navbar ul.nav li.active a:hover,
.navbar ul.nav li.active a:focus {
  color: #eb5844 !important;
  background: transparent !important;
}

.navbar .nav-item i {
  font-size: 18px;
}

.navbar .nav-item.open>a {
  background: none !important;
}

@media(min-width: 768px) {
  .navbar-nav>li>a {
    padding-top: 23px;
    padding-bottom: 15px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-expand-lg navbar-light navbar-fixed-top">
  <!-- Collection of nav links, forms, and other content for toggling -->
  <div id="navbarCollapse" class="collapse navbar-collapse justify-content-center">
    <div class="navbar-header d-flex col">
      <a id="logo" href="index.html"><img src="./img/logo1.png" alt=""></a>
    </div>
    <ul class="nav navbar-nav navbar-right ml-auto">
      <li class="nav-item" style="right: 100px;">
        <a href="tel:000000" style="color: #514eec;"></i>
          000000</a>
      </li>
      <li class="nav-item" style="right: 80px;">
        <a href="tel:000000" style="color: #514eec;"></i>
          0000000</a>
      </li>
      <li class="nav-item"><a href="https://www.facebook.com" target="_blank" style="color: #514eec;" class="nav-link"><i class="fa fa-facebook"></i></a></li>
      <li class="nav-item"><a href="https://www.instagram.com/" target="_blank" style="color: #514eec;" class="nav-link"><i class="fa fa-instagram"></i></a></li>
      <li class="nav-item"><a href="https://www.youtube.com/" target="_blank" style="color: #514eec;" class="nav-link"><i class="fa fa-youtube"></i></a></li>
    </ul>
  </div>
</nav>

Answer 1

您做错了。您使用 Bootstrap @ 4 navbar HTML代码，而您的cdn为 Bootstrap @ 3 ，它将无法正常工作。

Bootstrap @ 4导航栏example和Bootstrap @ 4 CDN

Answer 2

.navbar-header.col {
  padding: 0 !important;
}

.navbar-default .navbar-toggle {
  border-color: transparent;
}

.navbar {
  background: #fff;
  padding-left: 16px;
  padding-right: 16px;
  border-bottom: 1px solid #d6d6d6;
  box-shadow: 0 0 4px rgba(0, 0, 0, .1);
  margin-bottom: 0px;
  margin-top: 15px;
}

.nav-link img {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  margin: -8px 0;
  float: left;
  margin-right: 10px;
}

.navbar ul.nav li a:hover,
.navbar ul.nav li a:focus {
  color: #f08373 !important;
}

.navbar ul.nav li.active a,
.navbar ul.nav li.active a:hover,
.navbar ul.nav li.active a:focus {
  color: #eb5844 !important;
  background: transparent !important;
}

.navbar .nav-item i {
  font-size: 18px;
}

.navbar .nav-item.open>a {
  background: none !important;
}

@media(min-width: 768px) {
  .navbar-nav>li>a {
    padding-top: 23px;
    padding-bottom: 15px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-expand-lg navbar-light navbar-fixed-top">
  <!-- Collection of nav links, forms, and other content for toggling -->
  <!-- Remove collapse and navbar-collapse here -->
  <div id="navbarCollapse" class=" justify-content-center">
    <div class="navbar-header d-flex col">
      <a id="logo" href="index.html"><img src="./img/logo1.png" alt=""> YOUR LOGO</a>
    </div>
    <ul class="nav navbar-nav navbar-right ml-auto">
      <!-- Consider to use margin-right instead of right -->
      <li class="nav-item" style="margin-right: 10px;">
        <a href="tel:000000" style="color: #514eec;"></i>
          000000</a>
      </li>
      <li class="nav-item" style="margin-right: 10px;">
        <a href="tel:000000" style="color: #514eec;"></i>
          0000000</a>
      </li>
      <li class="nav-item"><a href="https://www.facebook.com" target="_blank" style="color: #514eec;" class="nav-link"><i class="fa fa-facebook"></i></a></li>
      <li class="nav-item"><a href="https://www.instagram.com/" target="_blank" style="color: #514eec;" class="nav-link"><i class="fa fa-instagram"></i></a></li>
      <li class="nav-item"><a href="https://www.youtube.com/" target="_blank" style="color: #514eec;" class="nav-link"><i class="fa fa-youtube"></i></a></li>
    </ul>
  </div>
</nav>

Bootstrap Navbar项目和徽标未显示在手机屏幕上

2 个答案: