當在較小的屏幕上觀看時，自舉行重疊

所以基本上問題在標題中。當我降低我的屏幕尺寸時，列下降，但開始與下面的行重疊。當在較小的屏幕上觀看時，自舉行重疊

我只是想知道是否有什麼明顯的東西我失蹤。我似乎無法找到適合我的解決方案。

見截圖和代碼如下...

#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

當在較小的屏幕上觀看時，自舉行重疊

回答

相關問題