Question

我想从bootstrap列中删除填充和边距，因为它添加了有问题的noPadding类，但它没有从提交按钮上的col-md-3和col-md-6之间删除边距和填充它的工作，任何想法？

main.html中

$scope.ot_Filter = function (location) {
    var shouldBeShown = true;
    for (var i = 0; i < x.length; i++) {
        if (location.amenities.indexOf(x[i]) === -1) {
            shouldBeShown = false;
            break;
        }
    }
    return shouldBeShown;
};

的main.css

<div class="col-md-8 col-md-offset-2">
    <form role="form">
        <!--<div class="form-group">-->
        <div class="col-md-3 nopaddingPanel">
            <label>Search Server</label>
        </div>
        <div class="col-md-6 nopaddingPanel">
            <!-- <form name="searchForm" class="form" ng-submit="submit()"> -->
            <div ng-class="{ 'has-error': searchForm.searchName.$invalid || searchForm.searchId.$invalid }">
                <input name="searchName" class="form-control" ng-model="vm.search" type="text" id="searchName" placeholder="Search" required>
            </div>
        </div>
        <div class="col-md-3">
            <button type="submit" class="btn btn-success" ng-click="searchServerFile()">Search</button>
        </div>
        <!-- </form> -->
        <!--</div>-->
    </form>
</div>

Answer 1

你需要创建一个more specific而不是bootstrap的CSS选择器，然后你可以使用padding: 0或padding: unset。

尽可能避免使用!important。它造成了比它解决的更多头痛。见When Using Important is the Right Choice

例如，以下内容应该有效：

.col-md-3.nopaddingPanel {
    padding: 0;
    margin: 0;
}

请注意，这个选择器更具体......它使用两个类名而不是一个，这意味着它将胜过bootstrap（在其选择器中只使用一个类名）。

如何从bootstrap列中删除填充和边距？

1 个答案: