0
ブートストラップのウェブサイトで、幅の画面を5等分列に分割しなければならないところです。ブートストラップは5等分列の機能を提供しないので、自分で作成しました。デスクトップではうまくいくが、モバイルではうんざりしている。私はベストを尽くしましたが、ここで何が間違っているか把握できませんでした。CSSがモバイルブートストラップで台無しになった
ここにコードサンプルがあります。
<div class="row" style="margin: 0;">
<div class="conatiner-fluid services">
<a href="/applications">
<div class="col-md-5 apps text-center">
<img src="images/home-page-tiles/apps.jpg" class="img-responsive" />
<div class="caption">
<h3> APPLICATIONS</h3>
<button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button>
</div>
</div>
</a>
<a href="/social">
<div class="col-md-5 apps text-center">
<img src="images/home-page-tiles/social.jpg" class="img-responsive" />
<div class="caption">
<h3> SOCIAL </h3>
<button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button>
</div>
</div>
</a>
<a href="/digital">
<div class="col-md-5 apps text-center">
<img src="images/home-page-tiles/digital.jpg" class="img-responsive" />
<div class="caption">
<h3> DIGITAL </h3>
<button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button>
</div>
</div>
</a>
<a href="/web">
<div class="col-md-5 apps text-center">
<img src="images/home-page-tiles/web.jpg" class="img-responsive" />
<div class="caption">
<h3> WEB </h3>
<button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button>
</div>
</div>
</a>
<a href="/design">
<div class="col-md-5 apps text-center">
<img src="images/home-page-tiles/design.jpg" class="img-responsive" />
<div class="caption">
<h3> DESIGN </h3>
<button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button>
</div>
</div>
</a>
</div>
</div>
と、このセクションのためのCSS：携帯電話で
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5 {
position: relative;
min-height: 269px;
padding: 0;
}
.col-xs-5 {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-5 {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-5 {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-5 {
width: 20%;
float: left;
}
}
.apps {
display: flex;
justify-content: center;
align-items: center;
}
.caption {
text-align: center;
position: absolute;
top: 55%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.caption h3 {
color: #fff;
font-family: menuFont;
-webkit-font-smoothing: antialiased;
margin: 0;
text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1);
-webkit-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1);
-moz-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1);
-o-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1);
}
.home-page-explore {
background-color: transparent;
border:1px solid #fff;
color:white;
border-radius: 0px;
margin-top:10px;
}
.home-page-explore:hover {
background-color: transparent;
border:1px solid #fff;
color:white;
}
、見出しやボタンが左側にシフトし、I-PHONE 6とアップモデルで、見出しやボタンはで表示されません。すべて。ここ
は、リアルタイムで問題を見たい人のためのウェブサイトの linkある
このhttps://s27.postimg.org/4pcnx6fz7/asdsadsad.png、テキストやボタンが左側に残っている参照してください。 –