기본적으로 질문은 헤더에 있습니다. 화면 크기를 줄이면 아래의 열이 떨어지지 만 아래 행과 겹치기 시작합니다.작은 화면에서 볼 때 겹쳐지는 부트 스트랩 행
나는 정말 분명한 뭔가가 있는지 없는지 알고 싶다. 나는 저를 위해 작동 할 해결책을 찾아내는 것을 보일 수 없다.
페이지의 스크린 샷 아래 코드 ...
#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>
나는 UX 컨설턴트를 돕는 아이러니처럼 할 자신의 웹 사이트를 :) 할 – Salketer