Question

我有这个引导程序导航：

<div id="navigation-sticky-wrapper" class="sticky-wrapper is-sticky" style="height: 125px;"><nav class="navbar navbar-default" id="navigation" style="position: fixed; top: 0px;">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle toggled" data-toggle="collapse" data-target="#navbar-collapse">
                            <i class="fa fa-bars"></i>
                        </button>
                        <a href="#" class="navbar-brand"><img class="img-responsive" src="images/logo.jpg"></a>
                    </div>
                    <div class="collapse navbar-collapse" id="navbar-collapse">
                            <ul class="nav navbar-nav">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Contact</a></li>

                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#"><img class="img-responsive" src="images/example.jpg"></a></li>
                            <li><a href="#"><img class="img-responsive" src="images/example2.jpg"></a></li>
                        </ul>
                    </div>
                </div>
            </nav></div>

我想要做的是当我的屏幕是：

@media (min-width: 992px){
}

有这样的导航：logo和导航栏 - 在菜单上方并且居中.....我将如何实现这一点我一直在尝试使用花车，但这还没有真正解决...有什么建议吗？

Answer 1

将此添加到您的媒体查询中：

.navbar-brand   {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        text-align: center;
        margin: auto;
  }

CSS Bootstrap导航最小宽度：992px

1 个答案: