Question

我有一个导航栏，折叠时我向右对齐，但切换时我希望项目集中对齐。

我该怎么做？

HTML

<body data-spy="scroll" data-target=".navbar" data-offset="50">

        <nav class="navbar navbar-inverse 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="#">Ian Campelo's Portfolio</a>
                </div>
                <div>
                    <div class="collapse navbar-collapse" id="myNavbar">
                        <ul class="nav navbar-nav">
                            <li><a href="#about">About</a></li>
                            <li><a href="#portfolio">Portfolio</a></li>
                            <li><a href="#contact">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
</body>

CSS

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

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

CodePen链接：http://codepen.io/iancampelo/pen/pjqNYq

Answer 1

添加此CSS。 codepen link here

        @media(max-width:768px){
            .navbar-collapse{
                text-align:center;          
            }   
        }

Bootstrap NavBar对齐 - 使用不同对齐进行Toogle和折叠

1 个答案: