Bootstrap在Div中對齊內容

基本上我希望我的下拉框在<div>的中心水平對齊。目前，它們位於列中，並在<div>之內，默認情況下它們已垂直顯示，並已將內容推送到<div>的左側。Bootstrap在Div中對齊內容

我使用的是最新版本的引導和只有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>

來源

2015-03-03 PandaMX

你試過'文本 - 對齊：center'？ – jbutler483 2015-03-03 09:11:45

是的，但它似乎沒有在div – PandaMX 2015-03-03 09:15:23

的'ul下拉菜單'居中可以發表小提琴嗎？ – jbutler483 2015-03-03 09:17:07

-1

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

來源

2015-03-03 09:28:05

不起作用 – PandaMX 2015-03-03 09:38:24

在.navbar-nav, .navbar-left有float:left。所以，你已經刪除了第一個float:none。然後在父母col-sm-4上，您可以添加.text-center。如果你使用

來源

2015-03-03 10:56:29

嘗試這樣的事情

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

而且從<li>去除浮動。

來源

2015-03-03 12:53:54 Symfony

此行添加到你的CSS：.navbar-nav {float: none;}從列表項刪除float屬性，然後添加：text-center到class="col-xs-4" DIV牽着你的列表

<div class="col-sm-4 text-center"> 
     <ul class="nav navbar-nav"> 
       <ul class="dropdown"> 
         <i class="fa fa-circle-o"></i> 
         <a href="#" data-toggle="dropdown">PLAY</a> 
         <ul class="dropdown-menu">

如果列表中仍然漂浮到一邊，然後這可能是因爲你的引導CSS是壓倒一切的自定義CSS，所以你需要添加!important的CSS屬性：.navbar-nav{float:none;}即.navbar-nav{float:none !important;} [！不推薦，但重要的是去與最好的辦法]

來源

2015-03-03 18:04:23

Bootstrap在Div中對齊內容

回答

相關問題