简体   繁体   中英

How do I position my navbar?

I am trying to learn bootstrap and so far it has been very fun. I have been stuck on this problem for a while, I want to space my navbar just two fifths of the screen. I think it will look a lot nicer if it is spaced that way but I haven't been able to find a solution. I was wondering if there is any way of doing that.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>                        
    </button>     
    <a class="navbar-brand" href="index.html"><strong>Website</strong></a>
  </div>
  <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav">
      <li class="active"><a href="index.html">Home</a></li>
      <li><a href="products.html">Products</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>
  </div>
</nav>

现在的导航栏所需的导航栏

You can create a css class:

.adjust-margins-container{
    margin-left: 30%;
}

and then add the class to:

<div class="container-fluid adjust-margins-container">

bootply example

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM