当在较小的屏幕上观看时，自举行重叠

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

我只是想知道是否有什么明显的东西我失踪。我似乎无法找到适合我的解决方案。

见截图和代码如下...

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

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

 
h2 { 
 
\t text-align: center; 
 
} 
 

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

 
#main-header { 
 
\t margin: 0; 
 
} 
 

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

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

 
#services-col { 
 
\t padding: 80px; 
 
} 
 

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

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

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

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

 
#glyphicon-image { 
 
\t 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

来源

2017-09-04 TheBear

我喜欢帮助一个UX顾问讽刺做自己的网站:) – Salketer

的问题在于，你设置的高度100vh的事实。作为

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

你应该做的是设置什么的最低高度100vh（我猜你想拥有一款带全高），但独自离开的高度和最大高度，这样如果内容的高度高于屏幕的高度，那么您的元素将变大以容纳。

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

来源

2017-09-04 08:32:25 Salketer

是它的权利最小高度 –

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

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

 
h2 { 
 
\t text-align: center; 
 
} 
 

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

 
#main-header { 
 
\t margin: 0; 
 
} 
 

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

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

 
#services-col { 
 
\t padding: 80px; 
 
} 
 

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

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

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

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

 
#glyphicon-image { 
 
\t 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>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>

我认为它溶液

来源

2017-09-04 08:37:07

代码，无需解释也没用... – Salketer

是的好吧我已经在'#services'和'#about'中添加了最小高度，只有高度是高度问题，没有更多的空间距离 –

添加一个div与类中的每个容器中之后，

COL-SM-12垫-0

并添加此css .pad-0 {padding：0;}

将很容易解决问题。

请参见下面的工作例如：

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

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

 
\t h2 { 
 
\t \t text-align: center; 
 
\t } 
 

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

 
\t #main-header { 
 
\t \t margin: 0; 
 
\t } 
 

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

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

 
\t #services-col { 
 
\t \t padding: 80px; 
 
\t } 
 

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

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

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

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

 
\t #glyphicon-image { 
 
\t \t display: block; 
 
\t \t margin: 0 auto; 
 
\t } 
 
    @media (max-width: 767px){#services-col { padding:0 10%;}

<!--HTML--> 
 
    
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> 
 
\t <!-- Section 2 Services --> 
 
    <div id="services" class="container"> 
 
\t <div class="col-sm-12 pad-0"> 
 
\t \t <div id="services-row" class="row"> 
 
\t \t <h1 id="section-headings">services</h1> 
 
\t \t \t <div id="services-col" class="col-md-6 col-sm-6"> 
 
\t \t \t \t <h2>UX Design and SEO</h2> 
 
\t \t \t \t <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> 
 
\t \t \t \t <img id="glyphicon-image" src="images/bar-chart.png" alt="ux-glyphicon" style="width:128px;height:128px;"> 
 
\t \t \t </div> 
 
\t \t \t <div id="services-col" class="col-md-6 col-sm-6"> 
 
\t \t \t \t <h2>Website Development</h2> 
 
\t \t \t \t <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> 
 
\t \t \t \t <img id="glyphicon-image" src="images/domain-registration.png" alt="ux-glyphicon" style="width:128px;height:128px;"> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
    </div> 
 
    <div class="clrfix"></div> 
 
    <!-- Section 3 About --> 
 
    <div id="about" class="container"> 
 
\t <div class="col-sm-12 pad-0"> 
 
     <h1 id="section-headings">about nomadic</h1> 
 
\t \t <div id="about-row" class="row"> 
 
\t \t 
 
\t \t <div class="col-md-6 col-sm-6"> 
 
\t \t \t <img src="..." alt="AboutImage"> 
 
\t \t </div> 
 
\t \t <div class="col-sm-6"> 
 
\t \t \t <p>Add the about text here and the about image over there <---</p> 
 
\t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
    </div>

来源

2017-09-04 09:27:29 Sangrai

当在较小的屏幕上观看时，自举行重叠

回答

相关问题