Question

我有身体＆amp; html边距和填充设置为0.但是，（我在macbook pro上）每当我向右或向左拖动页面时出现一个空白区域（或者我将body / html背景设置为的任何颜色。另一个问题是当我松开时，熨平板的左侧中心隐藏了正在显示的身体/ html的额外部分，但它继续显示在右侧。当您打开网页时它不会立即显示。我希望很详细。谢谢你的帮助！

这里是jsfiddle： https://jsfiddle.net/y4nww4d1/

以下是HTML和CSS：

    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="ESQ_Main.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <title>ESQ BUILDS:HOME</title>
    </head>
    <body>
        <div class="menu">
                <div class="row">
                    <div class = "col-md-2">
          </div>
          <div class = "col-md-2">
                        <a class="btn" href="https://www.google.com/">Home</a>
          </div>
          <div class="col-md-2">
                        <a class="btn" href="https://www.google.com/">About</a>
          </div>
          <div class = "col-md-2">
                        <a class="btn" href="https://www.google.com/">Services</a>
          </div>
                    <div class="col-md-2">
                        <a class="btn" href="https://www.google.com/">Conact Us</a>
          </div>
          <div class="col-md-2">
          </div>
                </div>

        </div>

        <div class="header">
      <div class="container">

            <h1>
                ESQ Builds
            </h1>
            <h4>
                A boutique construction company.
            </h4>
        </div>
    </div>
        <div class="label">
            <h2>
                Overview
            </h2>
            <p>
                Our company is dedicated to ...
            </p>
        </div>
        <div class="services">
            <div class="row">
                <div class="col-md-4 col-xs-6">
                    <h2>
                        Build.
                    </h2>
                    <p>
                        We have years of experience transforming ideas and creativity in to homes for a lifetime. We will work with you to make your dream a reality.
                    </p>
                    <div class="row">
                        <div class="col-md-6 col-xs-9">
                            <a class="btn" href="https://www.google.com/">Learn More</a>
                        </div>
                        <div class="col-md-6 col-xs-9">
                            <a class="btn" href="https://www.google.com/">Projects</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-xs-6">
                    <h2>
                        Tour.
                    </h2>
                    <p>
                        Come view our current projects in person. We offer lovely townhomes and a brand new neighborhood.
                    </p>
                    <div class="row">
                        <div class="col-md-6 col-xs-9">
                            <a class="btn" href="https://www.google.com/">Learn More</a>
                        </div>
                        <div class="col-md-6 col-xs-9">
                            <a class="btn" href="https://www.google.com/">Projects</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-xs-6">
                    <h2>
                        Partner.
                    </h2>
                    <p>
                        We work with companies to construct the facilities they need to acheive their goals.
                    </p>
                    <div class="row">
                        <div class="col-md-6 col-xs-9">
                            <a class="btn" href="https://www.google.com/">Learn More</a>
                        </div>
                        <div class="col-md-6 col-xs-9">
                            <a class="btn" href="https://www.google.com/">Projects</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <h5>
                ESQ Builds
            </h5>
            <p>
                Website/ Design by Alejandro Esquino
            </p> 
        </div>
    </body>
</html>

html,body{
    margin:0;
    background-color:gray;
}
/*MENU*/
.menu{
    width:100%;
    height:50px;
    background-color:gray;
    text-align:center;
  margin-bottom:0px;
}
.menu .row{
  padding-top:10px;

}

.menu .btn{
    color:white;
  font-size:20px;
}

/*HEADER*/
.header{
  height:600px;
  background:url("http://esqbuilds.com/images/luxury-builder-houston2.jpg");
  background-size:cover;

margin-top:0px;
}
.header

/*LABEL*/
.label{

}

/*Services*/
.services{

}

/*FOOTER*/
.footer{

}

/*BUTTON*/
.btn:link{
    text-decoration:none
}
.btn:hover{

}
.btn:active{

}
.btn:visited{

}

Answer 1

您的.menu和.services部分缺少.container您正在使用的.row包装元素。

好像你没有在.row中包含这些.container元素而使用引导网格。因此，您.row，margin-right: -15px;和margin-left: -15px;的负边距会导致.row超出其宽度。查看网格标记文档的https://getbootstrap.com/css/#grid，并注意：

行必须放在.container（固定宽度）或.container-fluid（全宽）内，以便正确对齐和填充。

.container元素有padding-left: 15px和padding-right: 15px，可抵消.row的负边距。

两侧的空白区域（html / css）

1 个答案: