Question

我是Bootstrap的新手。在下面的代码剪切中，第一行没有完全填充容器，但第二行（在一行中是一个类）确实填充整个容器。因此，如果要填充整个容器，则必须始终将内容嵌套到“”。

    <div class="container" style="background:#00f">
    <!--<div class="row" style="background-color: #2fa4e7">-->
        <div class="col-xs-2" style="background-color: red">
            col
        </div>
        <div class="col-xs-2">
            col
        </div>
        <div class="col-xs-2">
            col
        </div>
        <div class="col-xs-2">
            col
        </div>
        <div class="col-xs-2">
            col
        </div>
        <div class="col-xs-2" style="background-color: red">
            col
        </div>
    <!--</div>-->

    <div class="row">
        <div class="col-xs-12" style="background-color: red">
            col
        </div>
    </div>
</div>

如果将以下内容添加到css中，则“row”的行为与列类似：

.row {
    margin-left: 0px;
    margin-right: 0px;
}

我想知道为什么，换句话说，为什么行默认会有负边距？

Answer 1

您可以尝试删除整个容器的填充：

.container {
        padding-left: 0px  !important;
        padding-right: 0px !important;
}
.container .row {
        margin-left: 0px !important;
        margin-right: 0px !important;
}

摘录：

.container {
  padding-left: 0px  !important;
  padding-right: 0px !important;
}
.container .row {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container" style="background:#00f">
    <!--<div class="row" style="background-color: #2fa4e7">-->
    <div class="col-xs-2" style="background-color: red">
        col
    </div>
    <div class="col-xs-2">
        col
    </div>
    <div class="col-xs-2">
        col
    </div>
    <div class="col-xs-2">
        col
    </div>
    <div class="col-xs-2">
        col
    </div>
    <div class="col-xs-2" style="background-color: red">
        col
    </div>
    <!--</div>-->

    <div class="row">
        <div class="col-xs-12" style="background-color: red">
            col
        </div>
    </div>
</div>

Bootstrap 3列不会填满整个容器

1 个答案: