Div中的Bootstrap中心内容

Question

基本上我希望我的下拉框在<div>的中心水平对齐。目前，它们位于<div>的列中，默认情况下会垂直显示它们，并将内容推送到<div>的左侧。

我使用的是最新版本的bootstrap，只有CSS来填充标题并将其设置为透明！

<div class=" navbar  transparent navbar-default navbar-fixed-top" role="navigation"> <!--HEADER-->
        <div class="container-fluid header">                                                    <!--CONTAINER- Needs to be inset slightly-->
            <div class="row">
                <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>
                </div>


                <!--First NavBar Colum - Logo is Located Here-->
                <div class=" navbar-collapse collapse">
                        <div class="col-sm-4 ">

                        </div>

                <!--Second NavBar Colum - Centered Horizontal Navigation Links are Located Here-->
                    <div class="col-sm-4 ">
                        <ul class="nav navbar-nav navbar-left">
                            <ul class="dropdown">
                                <i class="fa fa-circle-o"></i>
                                <a href="#" data-toggle="dropdown">PLAY</a>
                                <ul class="dropdown-menu">
                                    <li class="divider"></li>
                                    <li><a href="#">Public Teatimes</a></li>
                                    <li><a href="#">Member Teatimes</a></li>
                                    <li><a href="#">Course Tour</a></li>
                                    <li><a href="#">Rates and Ratings</a></li>
                                    <li><a href="#">Outings</a></li>
                                </ul>
                            </ul>

                            <ul class="dropdown">
                                <i class="fa fa-circle-o"></i>
                                <a href="#" data-toggle="dropdown">CLUB</a>
                                <ul class="dropdown-menu">
                                    <li class="divider"></li>
                                    <li><a href="#">Membership</a></li>
                                    <li><a href="#">Calender</a></li>
                                    <li><a href="#">Lessons and Shop</a></li>
                                    <li><a href="#">Bar and Food</a></li>
                                </ul>
                            </ul>

                            <ul>
                                <i class="fa fa-circle-o"></i>
                                <a href="#contact" data-toggle="modal">CONTACT</a>
                            </ul>
                        </ul>
                    </div>

                        <!--Third NavBar Colum - Social Media Icons are Located Here-->
                                <div class="col-sm-4">
                                    <i class="fa fa-facebook-square fa-3x"></i>
                                    <i class="fa fa-twitter-square fa-3x"></i>
                                    <i class="fa fa-instagram fa-3x"></i>


                                </div>



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

Answer 1

在.navbar-nav, .navbar-left中有float:left。那么，你已经删除了第一个float:none。然后在父col-sm-4上，您可以添加.text-center。

Answer 2

尝试这样的事情

 .navbar-nav{
    width:250px;
    margin:0 auto;
    float:none;
    text-align:center;
    }

如果您使用，请从<li>移除浮动。

Answer 3

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