Bootstrap导航栏不显示超出其宽度的内容

时间：2018-10-12 23:02:44

标签： html css bootstrap-4 

@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）开始居中并一直延伸到页面末尾。不应该只是活动项目的长度吗？我已经在下面发布了有关此问题的代码。

任何建议都值得赞赏！

enter image description here 

.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 个答案:

没有答案
相关问题
最新问题