2017-09-04 1 views
0

기본적으로 질문은 헤더에 있습니다. 화면 크기를 줄이면 아래의 열이 떨어지지 만 아래 행과 겹치기 시작합니다.작은 화면에서 볼 때 겹쳐지는 부트 스트랩 행

나는 정말 분명한 뭔가가 있는지 없는지 알고 싶다. 나는 저를 위해 작동 할 해결책을 찾아내는 것을 보일 수 없다.

페이지의 스크린 샷 아래 코드 ...

#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

+0

나는 UX 컨설턴트를 돕는 아이러니처럼 할 자신의 웹 사이트를 :) 할 – Salketer

답변

2

문제는 당신이 100vh 할 수있는 높이를 설정하는 것이 사실에있다.

당신은 아마 (나는 당신이 한 섹션 전체 높이을 갖고 싶어 같은데요) 100vh하지만 혼자 높이와 최대 높이를 떠나 최소 높이를 설정해야 할 일
#services { 
    background-color: #fC99B0; 
    height: 100vh; 
    width: 100%; 
    margin: 0; 
} 

,이 방법으로 콘텐츠의 높이가 화면의 높이보다 높으면 요소가 더 커져서 조정할 수 없습니다.

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

이 예는 바로 분 높이 설명없이 –

0

#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>

난,

+0

코드는 쓸모가 :

아래 작업의 예를 참조 ... – Salketer

+0

예 ok '#services'와 '#about'에 min-height를 추가하고 height 만 더 이상 공간 contect에 문제가 없습니다. –

0

클래스와 각 컨테이너 후 DIV 추가 용액을 생각

COL-SM-12 패드 0

을 입력하고이 코드를 추가하십시오. .pad-0 {패딩 : 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>

관련 문제