Bootstrap：在响应块列上设置overlay div

Question

我正在尝试使用带有图像背景和叠加层和标题的行和列来制作包含4个块的响应式页面。除了叠加的宽度之外，我能够完成所有工作。

这是一张显示我正在尝试解决的问题的图片。左侧的列始终从左侧填充，但右侧列缺少左侧和右侧的整个宽度。

HTML

2016-06-13 16:33:34.406093 TestiOS10[8209:100611] bundleid: com.appc.TestiOS10, enable_level: 0, persist_level: 0, propagate_with_activity: 0
2016-06-13 16:33:34.406323 TestiOS10[8209:100607] Created DB, header sequence number = 248
2016-06-13 16:33:34.409564 TestiOS10[8209:100611] subsystem: com.apple.UIKit, category: HIDEvents, enable_level: 0, persist_level: 0, default_ttl: 0, info_ttl: 0, debug_ttl: 0, generate_symptoms: 0, enable_oversize: 0, privacy_setting: 0
2016-06-13 16:33:34.504117 TestiOS10[8209:100607] Created DB, header sequence number = 248
2016-06-13 16:33:34.548023 TestiOS10[8209:100607] subsystem: com.apple.BaseBoard, category: MachPort, enable_level: 0, persist_level: 0, default_ttl: 0, info_ttl: 0, debug_ttl: 0, generate_symptoms: 0, enable_oversize: 0, privacy_setting: 0
2016-06-13 16:33:34.568458 TestiOS10[8209:100608] subsystem: com.apple.FrontBoard, category: Common, enable_level: 0, persist_level: 0, default_ttl: 0, info_ttl: 0, debug_ttl: 0, generate_symptoms: 0, enable_oversize: 0, privacy_setting: 0

CSS

<div class="wrapper">
    <div class="row" id="rows">
        <div class="col-sm-6 col-md-6 col-lg-12 text-center portfolio">
            <div id="portfolio-overlay" class="titlePush">Portfolio</div>
        </div>
        <div class="col-sm-6 col-md-6 col-lg-4 text-center tools">
            <div id="tools-overlay" class="titlePush">Tools</div>
        </div>
        <div class="col-sm-6 col-md-6 col-lg-4 text-center about">
            <div id="about-overlay" class="titlePush">About</div>
        </div>
        <div class="col-sm-6 col-md-6 col-lg-4 text-center contact">
            <div id="contact-overlay" class="titlePush">Contact</div>
        </div>
    </div>
</div>

演示：JSFiddle

Answer 1

默认情况下col-*-*在引导程序中有padding，您需要重置它。并且您缺少课程.container因此您有水平滚动条

注意：我使用.text-center重置padding只是为了简化，因为是同一元素中的一个类应用于.col-*-*

@import url(https://fonts.googleapis.com/css?family=Poiret+One);
 body {
  font-family: 'Poiret One', cursive;
}
html,
body,
.wrapper {
  height: 100%;
}
/* Header/Jumbotron Section */

.header {
  height: 40%;
  background-color: red;
}
/* Jumbotron Font Styling & Size */

.headFont {
  font-size: 10vh;
  color: white;
  text-decoration: underline;
  text-align: center;
  top: 15%;
}
/* Sets hyperlink color */

#rowLink {
  color: white;
}
/* Pushes box titles down */

.title {
  padding-top: 40px;
}
/*****************************************
            Content Blocks 
******************************************/

/* Rows-content Homepage */

#rows {
  height: 30%;
  font-family: 'Poiret One', cursive;
  /*font-size: 2.3vh;*/
  font-size: 24px;
  color: white;
}
.portfolio {
  height: 100%;
  /*background: red; /* For browsers that do not support gradients
    background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
    background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
    background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
  background: url("https://www.topdraw.com/assets/uploads/2015/07/HiRes2.jpg");
  -webkit-background-size: ;
  background-size: cover;
  background-position: center;
}
/* Hover effects for portfolio block */

.portfolio:hover {
  text-decoration: underline;
}
/* Portfolio Overlay Block */

#portfolio-overlay {
  background: rgb(0, 0, 0);
  /* fallback color*/
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
  max-width: 100%;
}
/* Tools Block */

.tools {
  background-color: green;
  height: 100%;
}
/* Hover effects for tools block */

.tools:hover {
  text-decoration: underline;
}
/* Tools Overlay */

#tools-overlay {
  background: rgb(0, 0, 0);
  /* fallback color*/
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
  max-width: 100%;
}
/* About Me Block */

.about {
  background-color: lightblue;
  height: 100%;
}
/* Hover effects for tools block */

.about:hover {
  text-decoration: underline;
}
/* About Me Overlay */

#about-overlay {
  background: rgb(0, 0, 0);
  /* fallback color*/
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
  max-width: 100%;
}
/* Contact Me Block */

.contact {
  background-color: darkorange;
  height: 100%;
}
/* Hover effects for tools block */

.contact:hover {
  text-decoration: underline;
}
#contact-overlay {
  background: rgb(0, 0, 0);
  /* fallback color*/
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
  max-width: 100%;
}
.row .text-center {
  padding: 0
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container wrapper">
  <div class="row header">
    <div class="col-sm-12 headFont jumboHero text-center">Monsieur Bigglesworth</div>
  </div>

  <div class="row" id="rows">
    <a href="#" id="rowLink">
      <div class="col-sm-6 col-md-6 col-lg-12 text-center portfolio">
        <div id="portfolio-overlay" class="title">Portfolio</div>
      </div>
    </a>
    <div class="col-sm-6 col-md-6 col-lg-4 text-center tools">
      <div id="tools-overlay" class="title">Tools</div>
    </div>
    <div class="col-sm-6 col-md-6 col-lg-4 text-center about">
      <div id="about-overlay" class="title">About</div>
    </div>
    <div class="col-sm-6 col-md-6 col-lg-4 text-center contact">
      <div id="contact-overlay" class="title">Contact</div>
    </div>
  </div>
</div>

Answer 2

将此添加到您的CSS：

.text-center {
  padding-right:0;
  padding-left: 0;
}