在较小的屏幕上查看时，引导行重叠

时间：2017-09-04 08:24:23

标签： html css bootstrap-4

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

我只是想知道是否有一些我非常遗憾的事情。 我似乎无法找到适合我的解决方案。

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

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<!-- 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>
＆＃13;
＆＃13;
＆＃13;

WEBPAGE WITH SMALL RESOLUTION

3 个答案:

答案 0 :(得分：5)

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

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

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

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

答案 1 :(得分：0)

＆＃13;
＆＃13; 
#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;
	    min-height: 100vh;
	width: 100%;
	margin: 0;
}

#services-col {
	padding: 80px;
}

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

#about {
	background-color: #8589FC;
	    min-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;
}
＆＃13; 
<!-- 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>UX Design and SEO</h2>
            <p id="general-text">My main area of focus and expertise is in helping businesses to create a strong, appropriate online presence that helps them connect and communicate with there customers in the best way possible.</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>Website Development</h2>
            <p id="general-text">Unlike most UX and SEO consultants, I will not only work with you to design an optimal solution for you and your audience, but I will also implement your solution for you, rather than send you out to fix things on your own.</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 nomadic</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>
＆＃13;
＆＃13;
＆＃13;

我认为这是解决方案

答案 2 :(得分：0)

在每个容器后面添加一个带有类

的div
  

col-sm-12 pad-0

并添加此CSS .pad-0 {填充：0;}

将轻松解决问题。

见下面的工作示例：

＆＃13;
＆＃13; 
/*--CSS--*/
	
   .clrfix{clear:both;}
	   #section-headings {
		font-size: 44px;
	}
 #section-headings {
display: block;
float: left;
width: 100%;
}

	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;
	}
   @media (max-width: 767px){#services-col { padding:0 10%;}
＆＃13; 
<!--HTML-->
 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
	 <!-- Section 2 Services -->
  <div id="services" class="container">
	<div class="col-sm-12 pad-0">
		<div id="services-row" class="row">
		  <h1 id="section-headings">services</h1>
			<div id="services-col" class="col-md-6 col-sm-6">
				<h2>UX Design and SEO</h2>
				<p id="general-text">My main area of focus and expertise is in helping businesses to create a strong, appropriate online presence that helps them connect and communicate with there customers in the best way possible.</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>Website Development</h2>
				<p id="general-text">Unlike most UX and SEO consultants, I will not only work with you to design an optimal solution for you and your audience, but I will also implement your solution for you, rather than send you out to fix things on your own.</p>
				<img id="glyphicon-image" src="images/domain-registration.png" alt="ux-glyphicon" style="width:128px;height:128px;">
			  </div>
		</div>
	</div>
  </div>
  <div class="clrfix"></div>
  <!-- Section 3 About -->
  <div id="about" class="container">
	<div class="col-sm-12 pad-0">
        <h1 id="section-headings">about nomadic</h1>
		<div id="about-row" class="row">
		 
		  <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>
  </div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题