html - Bootstrap navbar - 如何使 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