Html 引导3中容器类外部的行分隔背景色_Html_Css_Twitter Bootstrap_Twitter Bootstrap 3

Html 引导3中容器类外部的行分隔背景色

html css twitter-bootstrap twitter-bootstrap-3

Html 引导3中容器类外部的行分隔背景色,html,css,twitter-bootstrap,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,我有一个非常基本的设置，因为我试图弄清楚为什么会发生这种情况。我有一个container div，其中有3行。我尝试将背景色附加到其中一行，它确实起作用，但当我缩小到mobile时，我看到container类，它有一个白色背景色，我的行背景色占据了视口的整个宽度，而不仅仅占据了容器剪辑内的空间这是我的HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="

我有一个非常基本的设置，因为我试图弄清楚为什么会发生这种情况。我有一个container div，其中有3行。我尝试将背景色附加到其中一行，它确实起作用，但当我缩小到mobile时，我看到container类，它有一个白色背景色，我的行背景色占据了视口的整个宽度，而不仅仅占据了容器剪辑内的空间

这是我的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>

我的结果是什么样的：

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

应用

溢出：隐藏

到容器：

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

谢谢，你知道为什么这不是默认行为吗？我想如果发生这种情况，你会想使用容器液体吗？这是因为

。contentContainer img

有5px的余量。

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