css - 背景色 Css

Question

我正在使用 bootstrap 3.0，以下是我的 HTML 代码，我遇到了背景颜色问题。

HTML代码

<div class="container" id="pictures">
    <div class="row">
        <div class="col-md-12">
            <h1>Collection</h1>
        </div>
    </div>
</div>

CSS 代码(我使用此 css 代码定位了 H1 标签)

#pictures h1 {
    padding:10px 0;
    color: #fff;
    font-size:60px;
    background-color: #f92735;
    text-align: center;
    margin: 60px 370px;
    border-radius: 10px;
    margin-top: -65px;
}

这就是问题所在，当我水平缩小浏览器时，背景颜色消失了。有人可以告诉我为什么吗？

Answer 1

问题出在你为h1申请的以下样式

 margin: 60px 370px;

这意味着显示您的 h1 标签需要最小 (370+370) 宽度。将边距减少到更少的数量，然后您也可以在小屏幕上看到它。

#pictures h1 {
padding:10px 0;
color: #fff;
font-size:60px;
background-color: #f92735;
text-align: center;
margin: 60px 30px;
border-radius: 10px;
margin-top: -65px;
}

DEMO