css - Bootstrap3 - 让导航栏元素占据整个宽度

Question

我正在尝试使用 bootstrap3 创建网页，但在导航栏中遇到了问题。我希望导航链接(有 4 个 - “网页设计”“开发”“摄影”“博客”)平均划分水平导航栏中的可用空间。至少他们只是堆积在左边。这是代码的一部分 - 希望我没有错过重要的一点。我根本没有修改 bootstrap CSS。

                <div class="container-fluid">
                    <div class="row">
                        <!-- Navbar -->
                        <nav class="navbar navbar-default" role="navigation">
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                            </div>
                            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                <ul class="nav navbar-nav">
                                    <li class="active col-md-3">
                                        <a href="#">Web Design</a>
                                    </li>
                                    <li class="col-md-3">
                                        <a href="#">Development</a>
                                    </li>
                                    <li class="col-md-3">
                                        <a href="#">Photography</a>
                                    </li>
                                    <li class="col-md-3">
                                        <a href="#">Blog</a>
                                    </li>
                                </ul>
                            </div>
                        </nav>
                    </div>

                    <div class="row">
                        <h1>Hello World!</h1>

                    </div>

                </div>
            </div>
        </div>

Answer 1

我用一些 css 规则强制对 Bootstrap 布局进行了一些更改，看看这是否能让你满意 :)

http://jsbin.com/xeniwonujeti/1/

我的 CSS 更改:

.nav { width: 100%;}
.nav li { width: 25%; text-align: center; }

显然，这将限制动态菜单更改，如果链接数量发生变化，您将不得不更改它。