Bootstrap 导航栏 - 如何使 navbar-header 全宽

Question

如何使 navbar-header 全宽或单独成行？

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

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

结果：

单词Brand应该与单词Home对齐。是否可以？在 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;
  }
}

这是带有示例的代码笔：http://codepen.io/anon/pen/zqjKpg

Bootstrap 导航栏 - 如何使 navbar-header 全宽

Bootstrap navbar - how to make navbar-header full width

html

css

navbar

twitter-bootstrap