我正在尝试创建一个导航栏。我已经为我的网站主体使用了 Bootstrap ，并希望导航栏跨越相同的宽度。但是，我希望边框跨越整个宽度；这样元素“Home、Learn、Progress 等”就出现在实际页面中的内容之上，但边框不会被切断。 
<div class="navbar container">
<div class="navbar-left">
{% url 'quizapp-home' as url %}
<a href='{{ url }}' {% if request.path|slice:":6" == url %} id="current" {% endif %}><i class="fas fa-home"></i> Home</a>
{% url 'quizapp-learn' as url %}
<a href='{{ url }}' {% if request.path|slice:":7" == url %} id="current" {% endif %}><i class="fas fa-pencil-ruler"></i> Learn</a>
{% url 'progress' as url %}
<a href='{{ url }}' {% if request.path|slice:":10" == url %} id="current" {% endif %}><i class="fas fa-chart-line"></i> Progress</a>
</div>
<div class='navbar-right'>
{% if user.is_authenticated %}
{% url 'profile' as url %}
<a href='{{ url }}' {% if request.path|slice:":9" == url %} id="current" {% endif %}> Profile</a>
{% url 'logout' as url %}
<a href='{{ url }}' {% if request.path|slice:":8" == url %} id="current" {% endif %}>Logout</a>
{% else %}
{% url 'login' as url %}
<a href='{{ url }}' {% if request.path|slice:":7" == url %} id="current" {% endif %}>Login</a>
{% endif %}
</div>
</div>
.navbar {
background-color: #ffffff;
overflow: hidden;
font-family: "Century Gothic", Century, sans-serif;
font-weight: bold;
list-style-type: none;
border-bottom: 2px solid #ccc;
/* box-shadow: 2px 2px 10px grey; */
}
.navbar a {
float: left;
color: #cccccc; /* light grey */
text-align: center;
padding: 10px 12px;
text-decoration: none;
font-size: 22px;
transition: all 0.3s ease; /* Add transition for hover effects */
}
.navbar a:hover {
color: #737373; /* dark grey */
}
.active {
color: #34a7e0; /* blue */
}
#current {
color: #34a7e0; /* blue */
}
.navbar-left a {
margin-left: 10px;
margin-right: 20px;
}
.navbar-right a {
margin-right: 10px;
float: left;
font-size: 18px;
}
最佳答案
只需将 .navbar 内容包装到 .container 中:
<nav class="navbar">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<!-- Your regular navbar content here, aligned with the page contents... -->
</div>
</nav>
已记录 here .无需自定义 CSS。
工作示例:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<body>
<nav id="navbar-example2" class="navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#one">one</a>
<a class="dropdown-item" href="#two">two</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#three">three</a>
</div>
</li>
</ul>
</div>
</nav>
<main>
<div class="container">
<h1>Hello, world!</h1>
</div>
</main>
</body>关于html - 如何让 CSS 边框跨越页面的长度但元素保留在容器内？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59185852/