Question

我在bootstrap中创建了一个导航栏并且它是响应式的。但是当我在移动设备上并按下“切换”按钮时，有一条我无法摆脱的白线，它位于顶部和菜单之间（当你切换它时）。我刚开始自助。

    body {
    margin: 0;
    padding: 0;
    }

    @font-face {
    font-family: "Nexa Light";
    src: url('../font/Nexa%20Light.otf');
    }

    .navbar-default {
    background-color: black;
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: none;
    font-size: 17px;
    }

    .navbar-default .navbar-brand,
    .navbar-default .navbar-brand:hover,
    .navbar-default .navbar-brand:focus {
      color: #FFF;
    }

    .navbar-default .navbar-nav > li > a {
      color: #FFF;
    }

    .navbar-default .navbar-nav > li > a:hover,
    .navbar-default .navbar-nav > li > a:focus {
      background-color: rgb(44, 44, 45);
      color: #dedede;

    }

    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active > a:focus {
      color: #FFF;
      background-color: rgb(44, 44, 45);
    }

    .navbar-default .navbar-text {
      color: #FFF;
    }

    .navbar-default .navbar-toggle {
      border-color: rgb(44, 44, 45);

    }

    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus {
      background-color: rgb(44, 44, 45);
    }

    .navbar-default .navbar-toggle .icon-bar {
      background-color: #FFF;
    }

    .col-md-12 {
    height: 500px;
    padding: 20px;
    }

    <link rel="shortcut icon" href="img/favicon2.ico" type="image/x-icon">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">    </script>
  
    <!-- NAVIGATIE BALK -->
    <nav class="navbar navbar-default" role="navigation">
    <!-- logo -->
    <div class="navbar-header">
      <!--  -->
      <a class="navbar-brand" href="#">
        <img src="img/LOGO2.png" alt="Brand" style="height: 100%" />
      </a>

      <!-- Inklappbaar ding als je op mobiel zit-->
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainnavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <!-- menu eitems  linker kant-->
    <div class="collapse navbar-collapse" id="mainnavbar">
      <ul class="nav navbar-nav">

        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Over mij</a></li>
        <li><a href="#">Contact</a></li>

        <!-- Dropdown -->
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Profiel <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Profiel</a></li>
              <li><a href="#">Instellingen</a></li>
              <li><a href="#">Log uit</a></li>
            </ul>
        </li>
      </ul>

      <!-- Aan de rechterkant -->
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Uitloggen</a></li>
      </ul>

    </nav>

    <!-- EINDE NAVIAGTIE BALK-->



    <div class="container-fluid">

    <div class="row">
      <div class="col-xs-12 col-md-12" style="background: lightblue;">Phone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 width
      Phone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 width
      Phone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 width
      Phone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 width
      Phone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 width
      Phone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 widthPhone entire width, Desktop 1/2 width
      </div>
      <div class="col-xs-12 col-md-12" style="background: lightcoral;">Phone entire width, Desktop 1/2 width</div>
      <div class="col-xs-12 col-md-12" style="background: lightgreen;">Phone entire width, Desktop 1/2 width</div>
    </div>

  </div>

Answer 1

添加以下样式。它将删除边框颜色和框阴影：

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: transparent;
    box-shadow: none;
}

Answer 2

尝试使用此代码。它将删除不需要的行

.navbar.navbar-default .navbar-collapse {border: none; box-shadow: none;}

Answer 3

如果我理解：

.navbar-collapse此引导类添加1px边框

.navbar-default .navbar-collapse此引导类将颜色＃e7e7e7添加到边框

您可以使用自定义CSS覆盖此行。

引导导航栏中的白线

3 个答案: