添加背景色会改变引导网格元素的宽度

Question

我刚开始使用bootstrap，我要为我的布局建立一个网格。

我想给我的网格元素添加背景色，所以我尝试添加自定义类，如。logo {background-color: #202020;}到相应的div。但是添加class - only with color属性!-改变div的宽度(见截图)?我无法解释。我已经搜索了这个问题，但添加自定义类似乎是添加背景颜色等的最佳实践。

截图

这里是代码-

HTML

<div class="container main-container">
    <div class="row">
        <!-- navigation -->
        <div class="col-md-2 nav">
            <!-- logo -->
            <div class="row">
                <div class="col-md-12 logo">
                    <h1>Logo</h1>
                    <h2>Dashboard</h2>
                </div>
            </div>
            <!-- user info -->
            <div class="row">
                <div class="col-md-12 user">
                    profile pic
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 user">
                    more lorem ipsum
                </div>
            </div>
        </div>

        <!-- content -->
        <div class="col-md-10">
            <div class="row">
                <div class="col-md-12">
                    Some lorem ipsum
                </div>
            </div>

        </div>
    </div>
</div>

,在header

中添加bootstrap.min.cssCSS

body {
    background-size: cover;
}
.main-container {
    margin-top: 5%;
    background-color: #f6f5f1;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
}
/* sidebar styling */
.nav {
    background-color: #2b2b2b;
    color: #fff;
}
.logo {
    background-color: #202020;
}
.user {
}

小提琴:https://jsfiddle.net/e1vx1mhb/

嗯，我已经找到了一个"变通办法"。我也给下面的行添加了背景色，它们也变得更宽了。但我不认为这是最好的解决方案。

有什么想法吗?谢谢你！

Answer 1

这是因为填充。如果您不使用box-sizing:border-box;并为引导列添加背景，则背景也适用于填充。我已经将这个全局规则添加到您的jsfiddle中:

* {
  box-sizing: border-box;
}

，一切都按你想的那样工作。仔细阅读一下box-sizing，我在构建网站时总是使用border-box，这样当我添加padding或border时，元素的大小就不会出现意外了。

https://jsfiddle.net/e1vx1mhb/1/

Answer 2

查找更新后的FIDDLE

为内部div添加clearfix类而不是行将解决您的问题，并注释background-size: cover; css属性