Bootstrap导航栏和左填充

Question

I have this navbar I have created to filter a datatable. The html looks like this:

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

Nothing is untoward, but for some reason the padding on the .navbar-form gives the navbar a double padding. The padding used is 0px 15px 0px 15px which is the default (unchanged)

Here is a fiddle for you to see.

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

If I override .navbar-form to use 0px 15px 0px 0px do you think this will cause any problems?

Answer 1

just add this line in your code it wont cause any problem. If you are changing the breakpoint then do update inthe media queries

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

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