发表新帖
发表新帖

Bootstrap - floating navbar button right

后端 未结
关注
3 1685
甜味超标
甜味超标 2021-02-05 00:31

I\'m using the bootstrap navigation bar, but I want to float one of the buttons to the right instead of the left as it already is. Here\'s the HTML: 

    


        

                      

              相关标签:
3条回答
  • 无人共我
    2021-02-05 01:08

    You would need to use the following markup. If you want to float any menu items to the right, create a separate <ul class="nav navbar-nav"> with navbar-right class to it.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>

        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>

    0 讨论(0)
  • 小蘑菇
    2021-02-05 01:12

    Create a separate ul.nav for just that list item and float that ul right.

    jsFiddle

    0 讨论(0)
  • 眼角桃花
    2021-02-05 01:16

    In bootstrap 4 use:

    <ul class="nav navbar-nav ml-auto">

    This will push the navbar to the right. Use mr-auto to push it to the left, this is the default behaviour.

    0 讨论(0)
 看不清?
提交回复
热议问题