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

将“banner-right-top”和“banner-right-bottom”的边距设置为0！important;

Answer 2

我为你解决了这个问题： 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（视口高度）单位来适当地将框大小调整到视口。这是一种更有效的方式来做你想做的事情。

// 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;
}