基本的に質問はヘッダーにあります。画面のサイズを小さくすると、下の行が下に落ちますが、下の行と重なるようになります。小さな画面で見るとブートストラップの行が重なって表示される
私は本当に明白な何かがあるかどうかを知りたいだけです。 私にとってはうまくいく解決策を見つけることができないようです。
を参照してくださいスクリーンショットおよび以下のコード...
#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>
を彼自身のウェブサイトを行う:) – Salketer