html - Bootstrap 在 Div 中居中内容

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。