html - Bootstrap 导航栏中的白线

Question

我在 bootstrap 中制作了一个导航栏，它是响应式的。但是当我在移动设备上按下“切换”按钮时，有一条白线我无法摆脱，它位于顶部和菜单之间(当你切换它时)。我刚开始 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;
}