Question

我刚开始使用bootstrap，我即将为我的布局构建一个网格。

我想为我的网格元素添加背景颜色，所以我尝试添加自定义类，如.logo {background-color：＃202020;到相应的div。但添加类 - 只有颜色属性！ - 更改div的宽度（见截图）？我无法解释这一点。我已经搜索过这个问题，但添加自定义类似乎是添加背景颜色等的最佳实践。

Screenshot

所以这是代码 -

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>

＆安培;在头部添加bootstrap.min.css

CSS

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

这一切都符合您的预期。阅读盒子大小，我在构建网站时总是使用边框，这样当添加填充或边框时，对于元素的大小没有任何意外。

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

Answer 2

查找更新的FIDDLE

为内部DIV添加clearfix类而不是行将解决您的问题并评论background-size: cover; css属性。

添加背景颜色会改变bootstrap网格元素的宽度？

2 个答案: