Question

我正在引导程序中构建一个响应式导航栏，并尝试根据自己的需要对其进行自定义，以进行自己的设计。

我设法在“移动设备尺寸”窗口中找到下拉菜单，但仍有一点空白似乎无法消除，尽管如此，我还是尝试覆盖了class属性（请检查下面的图片）

我正在使用引导程序3.3.7和jquery-3.3.1

.navbar {
  height: 50px;
  color: #2a4068;
  margin-bottom: 0px;
}

.navbar-default {
  color: #2a4068;
  background: #d8dfea;
  border-bottom: solid 0px #2a4068;
  box-shadow: 0px 1px 2px 0px #2a4068;
}

.container {
  height: 50px;
  padding-left: 0px;
  padding-right: 0px;
}

.navbar-header {
  height: 50px;
  margin-left: 0px;
  margin-right: 0px;
}

.navbar-collapse {
  padding-left: 0px;
  padding-right: 0px;
}

.navbar-nav {
  margin-right: 0px;
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
  margin: 0px 0px;
}

.navbar-right {
  padding-left: 0px;
  padding-right: 0px;
  margin-right: 0px;
}

.logoImage {
  z-index: 1;
  margin-top: -7px;
  margin-bottom: 20px;
}

.navbar-nav li {
  text-align: center;
  border-radius: 4px;
  color: #2a4068;
  cursor: pointer;
}

.navbar-nav li:hover {
  background-color: #99b1d7;
  color: #2a4068;
  opacity: 0.7;
}

#nav_links {
  display: block;
  color: #2a4068;
  font-weight: bold;
}

#navbar_menu {
  width: 100%;
  margin-right: 0;
  margin-top: -10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/styles.css">
	<title>Bootstrap</title>
</head>
<body>

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand logoImage" href="index.php">
        <img src="images/logo_large.png" title="Asserter" alt="logo" width="110" height="35" class="large-logo" id="brand-image" />
      </a>
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
    </div>
    <div class="collapse navbar-collapse navHeaderCollapse" id="navbar_menu">
      <ul class="nav navbar-nav navbar-right">
        <li class=""><a href="" class="" id="nav_links">Front</a></li>
        <li class=""><a href="" class="" id="nav_links">Admin</a></li>
        <li class=""><a href="" class="" id="nav_links">Profile</a></li>
        <li class=""><a href="" class="" target="_blank" id="nav_links">Chat</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" id="nav_links">Notifications</a>
          <ul class="dropdown-menu">
            <li><a href="" id="nav_links">Facebook</a></li>
            <li><a href="" id="nav_links">Twitter</a></li>
            <li><a href="" id="nav_links">Instagram</a></li>
          </ul>
        </li>
        <li class=""><a href="" class="" id="nav_links">Settings</a></li>
        <li class=""><a href="" class="" id="nav_links">Log out</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="container-fluid">
</div>

<script src="js/jquery-3.3.1-dev.js"></script>
<script src="js/bootstrap.min.js"></script>	
<script src="js/script.js"></script>
</body>
</html>

我需要一个完美的下拉菜单，该下拉菜单与屏幕限制一致

Answer 1

我在.container-fluid类中发现了小的填充。休息，我看不到任何利润。

 .navbar {height: 50px; color: #2a4068; margin-bottom: 0px;}

.navbar-default {color: #2a4068; background: #d8dfea; border-bottom: solid 0px #2a4068;box-shadow: 0px 1px 2px 0px #2a4068;}

.container {height: 50px;padding-left: 0px;padding-right: 0px;}

.navbar-header {height: 50px;margin-left: 0px;margin-right: 0px;}

.navbar-collapse {padding-left: 0px;padding-right: 0px;}

.navbar-nav {margin-right: 0px;margin-left: 0px;padding-left: 0px;padding-right: 0px;margin: 0px 0px;}

.navbar-right {padding-left: 0px;padding-right: 0px;margin-right: 0px;}

.logoImage {z-index: 1; margin-top: -7px;margin-bottom: 20px;}

.navbar-nav li {text-align: center;border-radius: 4px;color: #2a4068;cursor: pointer;}
.navbar-nav li:hover{background-color: #99b1d7;color: #2a4068;opacity: 0.7;}
#nav_links {display: block;color: #2a4068;font-weight: bold;}

#navbar_menu {width: 100%;margin-right: 0;margin-top: -10px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand logoImage" href="index.php">
            <img src="images/logo_large.png" title="Asserter" alt="logo" width="110" height="35" class="large-logo" id="brand-image"/>
        </a>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse navHeaderCollapse" id="navbar_menu">
        <ul class="nav navbar-nav navbar-right">
            <li class=""><a href="" class="" id="nav_links">Front</a></li>
            <li class=""><a href="" class="" id="nav_links">Admin</a></li>
            <li class=""><a href="" class="" id="nav_links">Profile</a></li>
            <li class=""><a href="" class="" target="_blank" id="nav_links">Chat</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" id="nav_links">Notifications</a>
                <ul class="dropdown-menu">
                    <li><a href="" id="nav_links">Facebook</a></li>
                    <li><a href="" id="nav_links">Twitter</a></li>
                    <li><a href="" id="nav_links">Instagram</a></li>
                </ul>
            </li>
            <li class=""><a href="" class="" id="nav_links">Settings</a></li>
            <li class=""><a href="" class="" id="nav_links">Log out</a></li>
        </ul>
    </div>
</div>

此设置在chrome和firefox上效果很好：

好吧，对于您正在使用的版本，添加此CSS将解决边距问题。虽然，我建议您在司法上使用它。

.container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
    margin-right: 0px;
    margin-left: 0px;
}

.container-fluid {
    padding-right: 0px;
    padding-left: 0px;
}

对于顶部空间，很难看到是哪个属性导致的，chrome调试器无法选择该元素。可能是由于错误的代码或类似box-shadow的属性。

更新：发现了导航栏下方的空格错误。实际上，您必须为导航栏标题指定正确的高度。对我来说，这行得通：

.navbar-header {
    height: 63px;
}

如何摆脱bootstrap CSS导航栏中的空白

1 个答案: