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

Bootstrap导航栏和左边填充

1 个答案: