Question

我试图更改导航栏的宽度，这个导航栏是固定的，并且还有一个导航栏折叠属性，我想在屏幕尺寸更改时保留这些属性。

我也在我正在使用的Bootstrap中添加了这个页面，所以目前使用下面的代码，导航栏是固定的但是全宽，当你改为移动网站时它会崩溃，所以我唯一想要的是从全宽改变宽度，使导航栏两侧至少有30％的开放空间，以便它以页面为中心。

并且只有在折叠

时才向导航栏添加徽标/图像

希望你能帮助我！

 <html>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.navbar-nav.nav-justified > li{float:none; }

.navbar{
    background-color:white;
    font-family: Amatic SC;
    border:none;
    font-size: 25px;
    letter-spacing: 1px;
    text-align:center;  
        }

.navbar:hover,
.navbar:active {
     color: black;
     transition: background-color 0.3s ease-oin,
         color 0.3s ease-out;
        }

.navbar-inverse .navbar-nav>li>a:hover {
       color: black;
    }

@media (max-width: 981px) {
.navbar-left,.navbar-right {
     float: none !important;
        }

.navbar-toggle {
    display: block;
        }

.navbar-collapse {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        }

.navbar-fixed-top {
        top: 0%;
        border-width: 0 0 1px;
        }

.navbar-collapse.collapse {
    display: none!important;
        }

.navbar-nav {
     float: none!important;
      margin-top: 7.5px;
        }

.navbar-nav>li {
     float: none;    
       }

.navbar-nav>li>a {
     padding-top: 10px;
     padding-bottom: 10px;                                               
        }

.collapse.in{
     display:block !important;
      }
    }
</style>
<body>


<nav class="navbar navbar-inverse navbar-fixed-top" "col-xs- col-xs-offset-0 col-md-6 col-md-offset-3"  >
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse" style="text-align:center" >
  <ul class="nav navbar-nav nav-justified">
    <li id="scrollDetails"><a href="#Details">Details</a></li>
    <li id="scrollDirections"><a href="#directions">Directions</a></li>
    <li id="navRsvp"><a href="#rsvp">RSVP</a></li>
    <li id="scrollBucket"><a href="#gBook">Bucket List</a></li>
    <li id="scrollAccommodation"><a href="#Accom">Accommodation</a></li>
   </ul>
  </div>  
 </nav>
</body>
</html>

Answer 1

您必须修改宽度，并在媒体查询中集中对齐代码，以了解移动视图中的预期行为。

您必须添加以下css：

@media (max-width: 981px) {
      .navbar {
        width: 30%;
        margin: auto;
      }
}

参考代码：

.navbar-nav.nav-justified > li {
  float: none;
}
.navbar {
  background-color: white;
  font-family: Amatic SC;
  border: none;
  font-size: 25px;
  letter-spacing: 1px;
  text-align: center;
}
.navbar:hover,
.navbar:active {
  color: black;
  transition: background-color 0.3s ease-oin, color 0.3s ease-out;
}
.navbar-inverse .navbar-nav>li>a:hover {
  color: black;
}
@media (max-width: 981px) {
  .navbar {
    width: 30%;
    margin: auto;
  }
  .navbar-left,
  .navbar-right {
    float: none !important;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar-fixed-top {
    top: 0%;
    border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .collapse.in {
    display: block !important;
  }
}

<nav class="navbar navbar-inverse navbar-fixed-top col-xs-offset-0 col-md-6 col-md-offset-3">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <div class="navbar-collapse collapse" style="text-align:center">
    <ul class="nav navbar-nav nav-justified">
      <li id="scrollDetails"><a href="#Details">Details</a>
      </li>
      <li id="scrollDirections"><a href="#directions">Directions</a>
      </li>
      <li id="navRsvp"><a href="#rsvp">RSVP</a>
      </li>
      <li id="scrollBucket"><a href="#gBook">Bucket List</a>
      </li>
      <li id="scrollAccommodation"><a href="#Accom">Accommodation</a>
      </li>
    </ul>
  </div>
</nav>

更改固定导航栏的宽度并保持折叠元素并添加徽标/图像

1 个答案: