Question

我有一个非常基本的设置，因为我正在试图弄清楚为什么会这样。我有一个容器div，在容器里面有3行。我正在尝试将背景颜色附加到其中一行，它确实有效，但是当我调整到移动尺寸时，我会看到容器类，它具有白色背景颜色，而我的行背景颜色占据了整个宽度视口而不是仅占用容器剪辑内的空间。

这是我的HTML：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Learn</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/styles.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="js/respond.js"></script>
    </head>
    <body>
    <div class="container">
        <div class="contentContainer">
            <section class="row row-steps">
                    <div class="col-xs-12 col-sm-4 track selectedTract">
                        <div class="row">
                            <div class="col-xs-10 col-xs-push-2 col-sm-12 col-sm-push-0">
                                 <h3><span>Step 1:</span> Choose a Track</h3>
                            </div>
                            <div class="col-xs-2 col-xs-pull-10 col-sm-12 col-sm-pull-0">
                                <img src="img/badge-dashed-empty.png" alt="dotted circle">
                            </div>
                        </div>
                    </div>  

                    <div class="col-xs-12 col-sm-4 track">
                        <div class="row">
                            <div class="col-xs-10 col-xs-push-2 col-sm-12 col-sm-push-0">
                                 <h3><span>Step 2:</span> Choose a Course</h3>
                            </div>
                            <div class="col-xs-2 col-xs-pull-10 col-sm-12 col-sm-pull-0">
                                <img src="img/badge-dashed-empty.png" alt="dotted circle">
                            </div>
                        </div>
                    </div>  

                    <div class="col-xs-12 col-sm-4 track">
                        <div class="row">
                            <div class="col-xs-10 col-xs-push-2 col-sm-12 col-sm-push-0">
                                 <h3><span>Step 3:</span> Choose a Lesson</h3>
                            </div>
                            <div class="col-xs-2 col-xs-pull-10 col-sm-12 col-sm-pull-0">
                                <img src="img/badge-dashed-empty.png" alt="dotted circle">
                            </div>
                        </div>
                    </div>  
            </section>
        </div>
    </div>

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    </body>
    </html>

CSS：

body{
    background-color: #f4f5f7;
}

.contentContainer{
    background-color: #fff;
    border: 1px solid #dddddd;
}

.contentContainer.row-steps{
    background-color: #eaf2f5 !important;
}

.contentContainer img{
    height: 44px;
    width: 44px;
    margin: 5px;
}

.contentContainer h3{
    font-size: 14px;
}

.contentContainer h3 span{
    font-weight: bold;
}

.selectedTract{
    background-color: #63c4aa;
    color: #fff !important;
}

我的结果是什么样的： enter image description here

我希望颜色保持在容器div的范围内

Answer 1

将overflow:hidden应用于容器：

.contentContainer{
    background-color: #fff;
    border: 1px solid #dddddd;
    overflow: hidden;
}

在Bootstrap 3中打破容器类外的行的背景颜色

1 个答案: