html - 在较小的屏幕上查看时 Bootstrap 行重叠

Question

所以基本上问题在标题中。当我降低屏幕尺寸时，列下降到下方，但开始与下方的行重叠。

我只是想知道是否确实缺少某些明显的东西。我似乎找不到适合我的解决方案。

请参阅下面的屏幕截图和代码...

#section-headings {
	font-size: 44px;
}

h1 {
	text-align: center;
	color: #ffffff !important;
}

h2 {
	text-align: center;
}

#tag-line {
	color: #ffffff !important;
}

#main-header {
	margin: 0;
}

.jumbotron {
	background-image: url(../images/alaska-landscape.jpg);
	background-size: cover;
	height: 100vh;
	width: 100%;
	margin: 0;
}

#services {
	background-color: #fC99B0;
	height: 100vh;
	width: 100%;
	margin: 0;
}

#services-col {
	padding: 80px;
}

#general-text {
	text-align: justify;
}

#about {
	background-color: #8589FC;
	height: 100vh;
	width: 100%;
	margin: 0;
}

#previous-work {
	background-color: #28292D;
	height: 100vh;
	width: 100%;
	margin: 0;
}

.col-md-6, .col-sm-6 {
	border-bottom: 0;
	margin-bottom: 0;
	margin: 0;
}

#glyphicon-image {
	display: block;
    margin: 0 auto;
}

<!-- Section 2 Services -->
  <div id="services" class="container">
    <div id="services-row" class="row">
      <h1 id="section-headings">services</h1>
        <div id="services-col" class="col-md-6 col-sm-6">
            <h2>heading 1</h2>
            <p id="general-text">paragraph text 1</p>
            <img id="glyphicon-image" src="images/bar-chart.png" alt="ux-glyphicon" style="width:128px;height:128px;">
        </div>
          <div id="services-col" class="col-md-6 col-sm-6">
            <h2>heading 2</h2>
            <p id="general-text">paragraph text 2</p>
            <img id="glyphicon-image" src="images/domain-registration.png" alt="ux-glyphicon" style="width:128px;height:128px;">
          </div>
    </div>
  </div>

  <!-- Section 3 About -->
  <div id="about" class="container">
    <div id="about-row" class="row">
      <h1 id="section-headings">about site</h1>
      <div class="col-md-6 col-sm-6">
          <img src="..." alt="AboutImage">
      </div>
      <div class="col-sm-6">
        <p>Add the about text here and the about image over there <---</p>
      </div>
    </div>
  </div>

WEBPAGE WITH SMALL RESOLUTION

Answer 1

问题在于您将高度设置为 100vh。如

#services {
    background-color: #fC99B0;
    height: 100vh;
    width: 100%;
    margin: 0;
}

你可能应该做的是将最小高度设置为 100vh(我猜你想让一个部分占据整个高度)但是单独保留高度和最大高度，这样如果内容的高度高于屏幕，您的元素会变大以适应。

#services {
    background-color: #fC99B0;
    min-height: 100vh;
    width: 100%;
    margin: 0;
}