html - Bootstrap 列搞砸了

Question

我正在使用 Bootstrap 的网格系统制作响应式横幅。横幅分为 3 个部分，banner-left、banner-right-top 和 banner-right-bottom。它应该是这样的:

但我似乎明白了:

col-sm-4 网格上的空白。谁能帮忙？？

此外，这是我的横幅代码。

banner {
  margin: 0 !important;
  padding: 0 !important;
}
.col-sm-8,
.col-sm-4 {
  padding: 0px !important;
  margin: 0px !important;
}
.banner,
.row {
  width: 100% !important;
  margin: 0 auto !important;
}
.btn-banner {
  color: #fff;
  background: transparent;
  border: 1px solid #fff;
  padding: 20px 10px !important;
  transition: .5s ease-out;
  -moz-transition: .5s ease-out;
  -webkit-transition: .5s ease-out;
}
.btn-banner:hover {
  color: #fff;
  background: #2c3e50;
  border: 1px solid #fff;
  text-decoration: none;
  transition: .5s ease-in;
  -moz-transition: .5s ease-in;
  -webkit-transition: .5s ease-in;
}
.banner .row .banner-left,
.col-sm-8 {
  background: url(http://www.wgcafe.nl/wp-content/uploads/2015/04/a-vintage-red-background-with-a-crisscross-mesh-pattern-and-grunge-stains-wanlop-sonngam.jpg) no-repeat;
  background-size: cover;
  max-height: 800px;
}
.banner .row .banner-left,
.col-sm-8 .text {
  padding: 127px 5% 127px 10% !important;
}
.banner .row .col-sm-8 .text h2 {
  font-size: 30px;
  color: #fff;
}
.banner .row .col-sm-8 .text p {
  color: #fafbfb;
}
.banner>.banner-right,
.col-sm-4>.banner-right-top {
  background: url(http://xyer.co/wallpaper/19/1/red-blue-free.jpg) no-repeat;
  background-size: cover;
  max-height: 400px !important;
  margin: 0px !important;
  padding: 0px !important
}
.banner>.banner-right,
.col-sm-4>.banner-right-top .text {
  padding: 162px 10% 160px 20% !important;
}
.banner>.banner-right,
.col-sm-4>.banner-right-top .text h3 {
  color: #fff;
}
.banner>.banner-right,
.col-sm-4>.banner-right-bottom {
  background: url(http://art.ngfiles.com/images/189000/189626_nondual_red-and-blue-emissions.jpg) no-repeat;
  background-size: cover;
  max-height: 400px !important;
}
.banner>.banner-right,
.col-sm-4>.banner-right-bottom .text {
  padding: 89px 10% 89px 20% !important;
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="banner">
  <div class="row">
    <div class="banner-left col-sm-8">
      <div class="text">
        <h2>WE ARE AN ELECTRICAL &amp MAINTENANCE COMPANY</h2>
        <p>Based in London and Kent regions.</p>
        <br />
        <br />
        <a class="btn-banner" href="about">FIND OUT MORE</a>
      </div>
    </div>
    <div class="banner-right col-sm-4">
      <div class="banner-right-top">
        <div class="text">
          <h3>WE ARE A PROFESSIONAL TEAM</h3> 
          <br />
          <br />
          <a class="btn-banner" href="contact">GET IN TOUCH TODAY</a>
        </div>
      </div>
      <div class="banner-right-bottom">
        <div class="text">
          <h4>WE PROVIDE MANY TYPES OF ELECTRICAL INSTALLATION, INCLUDING COMMERCIAL, INDUSTRIAL AND DOMESTIC.</h4>
        </div>
      </div>
    </div>
  </div>
</div>

让这个工作的一件事是 CSS.. *{margin:0; padding:0;}，但这破坏了页面上除横幅之外的所有其他内容。还有其他方法可以解决这个问题吗？？

Answer 1

我为你解决了这个问题: http://codepen.io/staypuftman/pen/yeyMjo

您使用了容器和内容元素，但试图通过像素填充绝对定位内容。这将在不同尺寸的屏幕上中断。使用这样的百分比:

// This is your content, pad element relative to the container
// I used percentages so, again, this would be relative to the viewport and potentially reusable
.banner .row .banner-left,.col-sm-8 .text{
  padding: 25% 20%;
}

我使用 vh(视口(viewport)高度)单位来根据视口(viewport)适当调整框的大小。这是一种更有效的方式来完成您想要做的事情。

// This is your left-hand column container
// Note how I see 100vh, that just makes it as tall as your viewport
.banner .row .banner-left,.col-sm-8{
    background:url(http://www.wgcafe.nl/wp-content/uploads/2015/04/a-vintage-red-background-with-a-crisscross-mesh-pattern-and-grunge-stains-wanlop-sonngam.jpg) no-repeat;
    background-size:cover;
    max-height: 800px;
  height: 100vh;
}