Bootstrap导航栏不显示超出其宽度的内容
@font-face {
font-family: Pipboy;
src: url('../monofonto.ttf');
}
.navbar {
border-bottom: 2px solid;
margin: 0px 10px;
color: #14fe17;
}
.nav-item.active {
position: relative;
}
.nav-item.active::before {
content: "";
position: absolute;
background: #f00;
width: 100%;
height: 20px;
}
.navbar::before,
.navbar::after {
height: 6px;
width: 3px;
content: "";
position: absolute;
display: block;
z-index: 5000;
bottom: -6px;
background: #14fe17;
}
.navbar::before {
left: 0px
}
.navbar::after {
right: 0px;
}
.navbar-nav {
width: 100%;
}
body {
font-family: Pipboy, sans-serif;
background-color: #151811;
font-size: 1.5rem;
}
body::after {
width: 100%;
height: 100%;
content: "";
position: absolute;
top: 0px;
left: 0px;
background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 2px);
z-index: 100000000;
pointer-events: none;
}
h2 {
margin-top: 20px;
margin-left: 20px;
color: #14fe17;
}
.center-image img {
margin: auto;
margin-top: 100px;
display: block;
position: relative;
max-height: 600px;
max-width: 300px;
filter: grayscale(1) sepia(100%) hue-rotate(55deg) saturate(7) brightness(1) contrast(2);
}
ul.navbar-nav>li.nav-item>a.nav-link,
ul.nav>li.nav-item>a.nav-link,
div.tab-content {
color: #14fe17 !important;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<title>
Hercules Strydom
</title>
</head>
<body>
<h2>
Hercules Strydom
</h2>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav nav-fill">
<li class="nav-item active ">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Timeline</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Travel</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-12">
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
STATUS
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">
SPECIAL
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">
PERKS
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
status
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
special
</div>
<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
perks
</div>
</div>
</div>
</div>
</div>
<div class="center-image">
<img src="vb.png">
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</html>
@font-face{
font-family: Pipboy;
src: url('../monofonto.ttf');
}
.navbar{
border-bottom: 2px solid;
margin: 0px 10px;
color: #14fe17;
}
.nav-item.active{
position: relative;
}
.nav-item.active::before{
content: "";
position: absolute;
background: #f00;
width: 100%;
height: 20px;
}
.navbar::before, .navbar::after{
height:6px;
width:3px;
content: "";
position: absolute;
display: block;
z-index: 5000;
bottom:-6px;
background: #14fe17;
}
.navbar::before{
left:0px
}
.navbar::after{
right:0px;
}
.navbar-nav{
width: 100%;
}
body{
font-family: Pipboy, sans-serif;
background-color: #151811;
font-size: 1.5rem ;
}
body::after{
width: 100%;
height:100%;
content: "";
position: absolute;
top:0px;
left: 0px;
background: repeating-linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 1px, transparent 1px, transparent 2px );
z-index: 100000000;
pointer-events:none;
}
h2{
margin-top: 20px;
margin-left: 20px;
color: #14fe17;
}
.center-image img{
margin: auto;
margin-top: 100px;
display: block;
position: relative;
max-height: 600px;
max-width: 300px;
filter: grayscale(1) sepia(100%) hue-rotate(55deg) saturate(7) brightness(1) contrast(2);
}
ul.navbar-nav > li.nav-item > a.nav-link ,
ul.nav > li.nav-item > a.nav-link, div.tab-content{
color: #14fe17 !important;
}<!DOCTYPE html>
<html>
<head>
<link rel= "stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<title>
Hercules Strydom
</title>
</head>
<body>
<h2>
Hercules Strydom
</h2>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav nav-fill">
<li class="nav-item active ">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Timeline</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Travel</a>
</li>
</ul>
</div>
</nav>
<div class= "container">
<div class="row">
<div class="col-12">
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
STATUS
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">
SPECIAL
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">
PERKS
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
status
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
special
</div>
<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
perks
</div>
</div>
</div>
</div>
</div>
<div class= "center-image">
<img src="vb.png">
</div>
</body>
<script src= "https://code.jquery.com/jquery-3.3.1.js"></script>
<script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src= "js/main.js"></script>
</html>
我正在尝试以Fallout 4 pipboy风格设计个人网页。我遇到一个错误，要在导航栏中编辑::before和::after上的行，使其看起来更像是pipboy。您在图片上看到的红色是我正在尝试调试nav-item active为什么从第一项（Home）开始居中并一直延伸到页面末尾。不应该只是活动项目的长度吗？我已经在下面发布了有关此问题的代码。
任何建议都值得赞赏！
.nav-item.active::before{
content: "";
position: absolute;
background: #f00;
width: 100%;
height: 20px;
} <nav class="navbar navbar-expand-lg navbar-dark">
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav nav-fill">
<li class="nav-item active ">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Timeline</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Travel</a>
</li>
</ul>
</div>
</nav>
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？