Question

当我将社交图标向右拉时，他们最终会将我的中心徽标向下推一点，而不是与徽标放置在同一高度（即不高于徽标，在其上方创建额外的空白区域））

我已经尝试将它们浮动到左侧，使位置绝对等但没有运气。

有人可以帮助我让它们显示在屏幕的右上角，但没有额外的空间吗？

以下是带有社交图标的导航栏的代码：

HTML

    <nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse">
     <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>
<div class="collapse navbar-collapse" id="navbar-primary-collapse">
  <ul class="nav navbar-nav">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Our Cars</a></li>
    <a href="#"><img id="logo-navbar-middle" src="../assets/images/logo.png" width="250" alt="logo"></a>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact us</a></li>
     </ul>

 <ul class="nav navbar-nav navbar-right pull-right">
            <li><a href="#"><i class="fa fa-camera-retro fa-lg"></i></a>   </li>
            <li><a href="#"><i class="fa fa-twitter fa-lg"></i></a></li>
            <li><a href="#"><i class="fa fa-pinterest fa-lg"></i></a></li>
        </ul>



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

CSS

#navbar-primary .navbar-nav { 
background: #fff;
width: 100%;
text-align: center;
li {
display: inline-block;
float: none;
a {
  padding-left: 30px;
  padding-right: 30px;
  padding-top:10px;
}
}
}


.social {
margin: 0;
padding: 0;

}

.social ul {
margin: 0;
padding: 5px;
}

.social ul li {
margin: 5px;
list-style: none outside none;
display: inline-block;
}

任何帮助都非常感谢，我已经坚持了好几天

谢谢！

Answer 1

这是我的所作所为，但可能会有一些响应问题，但它可能对您有帮助。

   <!DOCTYPE html>
    <html>
        <head>
            <title>TODO supply a title</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
            <link rel="stylesheet" href=" https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
            <style type="text/css">
                .navbar .navbar-nav {
                    display: inline-block;
                    float: none;
                }

                .navbar .navbar-collapse {
                    text-align: center;
                }
                .top-nav{
                    margin-bottom: 0;
                    padding-top: 10px;
                    min-height: 20px;
                }
                .top-nav .navbar-nav>li>a{
                    padding: 0 5px 0 5px;
                }
                .top-nav .navbar-right{
                    margin-right: 10px;
                }
                .logo{
                    margin-top: -30px;
                }
            </style>
        </head>
        <body>
            <nav class="navbar top-nav">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-camera-retro fa-lg"></i></a>   </li>
                    <li><a href="#"><i class="fa fa-twitter fa-lg"></i></a></li>
                    <li><a href="#"><i class="fa fa-pinterest fa-lg"></i></a></li>
                </ul>
            </nav>
            <nav id="navbar-primary" class="navbar" role="navigation">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <!-- Brand and toggle get grouped for better mobile display -->
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                            </div>
                            <div class="collapse navbar-collapse" id="navbar-primary-collapse">
                                <ul class="nav navbar-nav">
                                    <li><a href="#">About Us</a></li>
                                    <li><a href="#">Our Cars</a></li>
                                    <li><a href="#" style="padding-top: 0;"><img class="logo" src="logo.png" alt="Silver Lining Wedding and Classic Car Chauffeurs Nottingham Logo"></a></li>
                                    <li><a href="#">Gallery</a></li>
                                    <li><a href="#">Contact us</a></li>
                                </ul>
                            </div><!-- /.navbar-collapse -->          
                        </div>
                    </div>
                </div><!-- /.container-fluid --> 
            </nav>
            <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        </body>
    </html>

如何在使用中央徽标导航栏引导时将社交图标拉到右侧

1 个答案: