Bootstrap導航欄和左填充

Question

我已創建此導航欄來過濾數據表。 html看起來像這樣：

<div class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#datatable-navbar"></button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="datatable-navbar">                                        
        <form class="navbar-form navbar-left" role="form">                                              
            <button type="button" class="btn btn-default">Delete</button>

            <div class="form-group">
                <select class="form-control">
                    <option selected>All categories</option>
                    <option>Category one</option>
                    <option>Category two</option>
                    <option>Category three</option>
                </select>
            </div>

            <div class="form-group">
                <select class="form-control">
                    <option selected>All articles</option>
                    <option>Article one</option>
                    <option>Article two</option>
                    <option>Article three</option>
                </select>
            </div>

            <button type="submit" class="btn btn-default">Filter</button>
        </form>

        <form class="navbar-form navbar-right" role="form">                                                                   
            <div class="form-group">
                <label>Views</label>
                <select class="form-control">
                    <option selected>All</option>
                    <option>5</option>
                    <option>10</option>
                    <option>15</option>
                </select>
            </div>

            <div class="form-group">
                <label>Posts</label>
                <div class="btn-group">
                    <button type="button" class="btn btn-default">Left</button>
                    <button type="button" class="btn btn-default">Right</button>
                </div>
            </div>

        </form>
    </div><!-- /.navbar-collapse -->
</div>

沒有什么不好的，但是由於某些原因，.navbar形式的填充為導航欄提供了雙重填充。 使用的填充為0px 15px 0px 15px ，這是默認值（未更改）

這是一個小提琴供您查看。

http://jsfiddle.net/4Kt9Y/1/

如果我覆蓋.navbar-form以使用0px 15px 0px 0px ，您認為這會引起任何問題嗎？

Answer 1

只需在您的代碼中添加此行，就不會引起任何問題。 如果要更改斷點，請在媒體查詢中進行更新

@media (min-width:0px;) and (max-width: 767px) {
   .navbar-collapse {
        padding-left: 15px;
   }
}

@media (min-width: 768px) {
 .navbar-collapse {
        padding-left: 0;
   }
}