社交媒體圖標顯示在右側而不是底部，以進行引導響應式布局

Question

對於更大的屏幕，社交媒體圖標在右側對齊。 但是，折疊后，它們笨拙地放在菜單項的側面而不是底部。

我如何將其深入到底？

這是標題代碼

                <nav class="navbar navbar-inverse navbar-fixed-top">
                <div class="container-fluid">
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
                      <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="#"><img src="img/logo2.png" alt="TTO">
                    </a>
                  </div>
                  <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a class="page-scroll nav-text" href="#about">About</a></li>
                        <li><a class="page-scroll nav-text" href="#services">Services</a></li>
                        <li><a class="page-scroll nav-text" href="#bikerentals">Bike Rentals</a></li>
                        <li><a class="page-scroll nav-text" href="#gallery">Packages</a></li>
                        <li><a class="page-scroll nav-text" href="#contact">Contact</a></li>
                    </ul>
                               <!-- social media icons -->
                    <ul class="nav navbar-nav navbar-right nav-pills">
                        <li><a href="#"><i class="fa fa-lg fa-facebook"></i></a></li>
                        <li><a href="#"><i class="fa fa-lg fa-google-plus"></i></a></li>
                        <li><a href="#"><i class="fa fa-lg fa-linkedin"></i></a></li>
                   </ul>
                  </div>

                  <!--/.nav-collapse -->
                </div>
                <!--/.container-fluid -->
              </nav>

看起來像這樣

這是我的CSS

        body {
         font-family: 'Lato',sans-serif;   
        }

        .navbar-brand {
            padding: 40px 40px;  
            margin-top: 0px;  
            height: 20px; 
        }

        .navbar-brand>img {
           max-height: 100%;
           height: 100%;
           width: auto;
           margin: 0 auto;


        }


        .navbar .navbar-nav {
          display: inline-block;
          float: none;
          vertical-align: middle;
        }



        .navbar .navbar-collapse {
          text-align: center;
        }



            /* Get rid of link padding to make the above easier */
            .navbar-nav>li>a {
                 padding-top:0px;
                 padding-bottom:0px;
            }


            .navbar-brand, .navbar-nav>li>a {
                height: 67px;
                line-height: 67px;
            }


           /*EDIT top and bottom padding to shrink and grow image */
           .navbar-brand { 
                padding: 0px 0px;
                margin-top: 5px;
           }

        .nav-text{
            font-size: 20px;
        }

        .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
            border-color: #beafaf;
        }

Answer 1

一種選擇是將您的某些規則限制為768px以上的媒體查詢，以使您的移動navbar不暴露於引起問題的規則。

請參見示例示例。

 body { font-family: 'Lato', sans-serif; } @media (min-width: 768px) { .navbar.navbar-inverse .navbar-nav { display: inline-block; float: none; vertical-align: middle; } .navbar.navbar-inverse .navbar-nav>li>a { padding-top: 0px; padding-bottom: 0px; } .navbar.navbar-inverse .navbar-nav>li>a { height: 67px; line-height: 67px; } } .navbar.navbar-inverse .navbar-toggle { margin-top: 15px; } .navbar.navbar-inverse .navbar-brand>img { max-height: 100%; height: 100%; width: auto; margin: 0 auto; } .navbar.navbar-inverse .navbar-brand { padding: 0px 0px; margin-top: 0px; height: 67px; } .navbar.navbar-inverse .nav-text { font-size: 20px; } .navbar.navbar-inverse .navbar-collapse, .navbar.navbar-inverse .navbar-form { border-color: #beafaf; } .navbar.navbar-inverse .navbar-collapse { text-align: center; } .navbar.navbar-inverse .navbar-right.nav-pills li { text-align: center; float: none; display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"> <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="#"> <img src="http://placehold.it/67x67/f00" alt="TTO"> </a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-left"> <li><a class="page-scroll nav-text" href="#about">About</a> </li> <li><a class="page-scroll nav-text" href="#services">Services</a> </li> <li><a class="page-scroll nav-text" href="#bikerentals">Bike Rentals</a> </li> <li><a class="page-scroll nav-text" href="#gallery">Packages</a> </li> <li><a class="page-scroll nav-text" href="#contact">Contact</a> </li> </ul> <ul class="nav navbar-nav navbar-right nav-pills"> <li><a href="#"><i class="fa fa-lg fa-facebook"></i></a> </li> <li><a href="#"><i class="fa fa-lg fa-google-plus"></i></a> </li> <li><a href="#"><i class="fa fa-lg fa-linkedin"></i></a> </li> </ul> </div> </div> </nav> 

Answer 2

我認為您應該嘗試從ul中刪除navbar-right。