Question

如何使navbar-header全宽或一行？

我在clear:both;上添加了collapse navbar-collapse，但所有填充都搞砸了。

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">

            <!-- navbar-header -->
            <div class="navbar-header" style="border: 4px solid red !important;">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <!-- navbar-header -->

            <!-- email -->
            <div class="pull-right hidden-xs">
                email: <a href="#">xxx{at}example.com</a>
            </div>
            <!-- email -->

            <!-- collapse content -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="border: 2px solid blue; clear:both;">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="home.html">Home</a></li>
                    <li><a href="work.html">News</a></li>
                    <li><a href="shop.html">Projects</a></li>
                    <li><a href="shop.html">Links</a></li>
                    <li><a href="contact.html">Contact</a></li>
                    <li><a href="contact.html">CV</a></li>
                </ul>


                <div class="pull-right">
                    <form class="navbar-form" role="search">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
                            <div class="input-group-btn">
                                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
            <!-- collapse content -->

        </div>

</nav>

结果：

品牌一词应与主页一词对齐。可能吗？在Bootstrap中正确的做法是什么？

修改

Answer 1

这里是fiddle。使用media query并重置较小屏幕的padding：

.navbar-brand{
  padding: 15px 15px 15px 30px;
}

@media (max-width: 768px){
     .navbar-brand{
        padding: 15px;
    }  
}

Bootstrap documentation for it's media querys

Answer 2

您可以简单地向.navbar-header添加边距，然后使用media screen在较小的设备上修改它。这是代码：

.navbar-header {
  margin-left: 15px !important;
}

@media screen and (max-width: 768px) {
  .navbar-header {
    margin-left: -15px !important;
  }
}

以下是codepen示例：http://codepen.io/anon/pen/zqjKpg

Bootstrap navbar - 如何使navbar-header全宽

2 个答案: