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; }

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

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

1 个答案: