Question

注意当使用Bootstrap时，容器div中的行div有左边距＆＃34;出现＆＃34;容器div外面（左边距是黄色部分）：

我尝试使用以下代码复制此行为：

<!DOCTYPE html>

<html>
    <head>
        <style>
            #div1
            {
                width: 500px;
                height: 400px;
                border: 1px solid black;
                margin-left: auto;
                margin-right: auto;
            }

            #div2
            {
                width: 500px;
                height: 200px;
                background-color: red;
                margin-right: 100px;
                margin-left: 100px;
            }
        </style>
    </head>

    <body>
        <div id="div1">
            <div id="div2">
            </div>
        </div>
    </body>
</html>

但它不起作用（左边距留在容器div内）：

Answer 1

你可以通过使用负值的边距来做到这一点：

.row {
    margin-left: -15px;
    margin-right: -15px;
}

Answer 2

你需要在div1上使用相同的值填充左边填充 - 基于div2的负边距 - 左边距，右边距值。检查我已删除添加的媒体查询和大小调整的片段以获得更好的视图。并删除div2的宽度并设置初始宽度

＆＃13;

*{
  box-sizing:border-box;
  }
body{
 margin:0;
}
 #div1
        {
            width: 500px;
            height: 400px;
            border: 1px solid black;
            margin-left: auto;
            margin-right: auto;
            padding-right: 100px;
            padding-left:100px;    
        }

        #div2
        {
           
            height: 200px;
            background-color: red;
            margin-right: -100px;
            margin-left: -100px;
        }
@media only screen and (max-width: 768px){

#div1 {
    width: 81.584%;
}
}

＆＃13;

 <div id="div1">
   <div id="div2"></div>
    </div>

＆＃13;

如何使左边距＃34出现＆＃34;在容器div之外？

2 个答案: