导航栏-需要将顶行和底行扩展到100％

时间：2018-09-16 19:08:33

标签： html css

我正在尝试将导航线的宽度扩展到整个宽度，而不仅仅是覆盖链接。我认为第7行（包括）上的代码/样式表正在干扰第12-21行以下的html样式标签。但是，如果我删除此行，那么黑暗的背景就会消失，并且链接将显示为列表。

<!doctype html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
	<style>

.navbar-nav a {

  border-top:3px solid #DB9842;
  border-bottom: 3px solid #DB9842;
  
}

</style>	
<body>
<div>
  <nav class="navbar-nav navbar-expand-sm bg-dark">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </nav>
</div>
</body>
</html>

2 个答案:

答案 0 :(得分：1)

从您的样式地址中删除A

您在a链接上有一个边框，而不是.navbar-nav。 a链接样式将仅覆盖可点击部分，而不覆盖整个导航区域。

要解决此问题，如果按照以下代码从样式中删除a，则它将覆盖导航的整个宽度。

.navbar-nav {
  border-top:3px solid #DB9842;
  border-bottom: 3px solid #DB9842;
}

由于.navbar-nav元素上的ul样式也处于创建双边框的状态。为了防止这种情况，我添加了以下代码，以便仅将边框应用于导航区域，而不应用于ul。

.navbar-nav ul {border:none;}

enter image description here 

<!doctype html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
	<style>

.navbar-nav {
  border-top:3px solid #DB9842;
  border-bottom: 3px solid #DB9842;
}
.navbar-nav ul {border:none;}
</style>	
<body>
<div>
  <nav class="navbar-nav navbar-expand-sm bg-dark">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </nav>
</div>
</body>
</html>

答案 1 :(得分：0)

希望这对您有所帮助。

<!doctype html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
	<style>

.border_color{

  border-top:3px solid #DB9842;
  border-bottom: 3px solid #DB9842;
  
}

</style>	
<body>
<div class="border_color">
  <nav class="navbar-nav navbar-expand-sm bg-dark">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </nav>
</div>
</body>
</html>

相关问题
最新问题