Question

当使用bootstrap构建网站的基础时，它会创建一些奇怪的黑色，黑色是主体的颜色，标题右侧的边距。

HTML：

<section id="header">
    <div class="row">
        <div class="content-wrapper">
            <div class="col-md-6">
                <div class="left">
                    <img src="#" alt="">
                </div>
            </div>
            <div class="col-md-6">
                <div class="right">
                    <nav>
                        <ul>
                            <li><a href="#">a</a></li>
                            <li><a href="#">b</a></li>
                            <li><a href="#">c</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="featured">
    <div class="row">
        <div class="col-md-4 box yellow">

        </div>
        <div class="col-md-4 box blue">

        </div>
        <div class="col-md-4 box red">

        </div>
    </div>

    <div class="row">
        <div class="col-md-4 box green">

        </div>
        <div class="col-md-4 box gray">

        </div>
        <div class="col-md-4 box white">

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

CSS：

body {
    background: #000;
}
.content-wrapper {
    max-width: 1100px;
    margin: 0 auto;
}
.left {
    float: left;
}
.right {
    float: right;
}
section#header {
    background: white;
    height: 150px;
}
nav ul li {
    display: inline-block;
}
.yellow {
    background: yellow;
}
.red {
    background: red;
}
.blue {
    background: blue;
}
.green {
    background: green;
}
.gray {
    background: gray;
}
.white {
    background: white;
}
.box {
    height: 250px;
}

这是一个小伙伴：http://jsfiddle.net/awu2cp6a/

Answer 1

右侧的黑色是背景颜色。

您只看到它的原因是，因为.row有margin-left/right: 15px;。如果删除/覆盖此为0px，则黑色消失或您将row类添加到带有图像的元素中。

修改

因此，如果您有一个图像，它将超过黑色区域，但因为没有适合全尺寸的图像，所以它不会显示。你试过给你的部分一行吗？

Bootstrap会创建某种边距

1 个答案: