中心bootstraps导航项目

时间:2013-09-30 10:41:42

标签: css twitter-bootstrap

我向ul添加了一个新类,并尝试使用margin设置样式:0 auto和text-align:center但不起作用..

<section class="navbar navbar-default">
            <ul class="nav navbar-nav">
                <li class="active"><a href="index.php">Home</a></li>
                <li><a href="venue.php">Venue</a></li>
                <li><a href="schedule.php">Schedule</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Artists <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                            <li><a href="artists.php" tabindex="-1">All Artists</a></li>
                            <li class="divider"></li>
                            <li><a href="#" tabindex="-1">1st</a></li>
                            <li><a href="#" tabindex="-1">2nd</a></li>
                            <li><a href="#" tabindex="-1">3rd</a></li>
                        </ul>
                </li>
                <li><a href="Register.php">Register</a></li>
            </ul>   
        </section>

2 个答案:

答案 0 :(得分:0)

喜欢这个

<强> demo

<强> CSS

.nav{
    background-color:red;
    width:300px;
    margin:0 auto;
    text-align:center;
}
.nav ul {
list-style-type:none;

}
.nav ul li{

}

答案 1 :(得分:0)

这是中心引导导航项的小提琴......

jsfiddle

您只需要添加以下css。

.navbar {
      text-align:center;
}