0
サイトに別のセクションを作成しようとしました。モバイル用には< 768 px、他のすべての解像度では別のセクションが表示されます。モバイルディスプレイでは、正しく表示されるように見えます。より大きな解像度では、両方のセクションが表示されます。ブートストラップvisable-xsが動作しない
hidden-xsクラスはモバイルのセクション(行)を非表示にしますが、visable-xsクラスはモバイルでセクション(行)を表示するだけでは機能しません。うまくいけばそれは私が見落としている明らかな何か。
.top-pad {
padding-top: 30px;
}
.rates-text {
background-image: url(../photos/asanoha.png);
background-color: rgba(239,239,239, 0.4);
border-radius: 10px;
border: 1px solid black;
}
.flower-icon {
margin-top: 15px;
}
.btn-class-signup {
margin: 20px;
}
.top-space {
margin-top: 10px;
}
問題はここで見ることができ、繰り返し毎月のメンバーシップ:
<!-- Desktop/Tablet Monthly Memberships -->
<div class="row hidden-xs">
<div class="col-lg-12 text-center">
<h2 class="top-pad">Monthly Memberships<br><br></h2>
</div>
<div class="col-md-4 col-sm-4 text-center">
<div class="rates-text clearfix">
<div class="col-md-4 col-sm-4">
<img src="photos/flower_icon.png" class="img-responsive center-block flower-icon">
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<h3 class="mr-top-space"><u>Purple</u></h3>
</div>
<div class="col-md-4 col-sm-4">
<img src="photos/flower_icon.png" class="img-responsive center-block flower-icon">
</div>
<p>$60</p>
<p>Unlimited Floor Classes</p>
<p> </p>
<p> </p>
<p><a href="https://clients.mindbodyonline.com/asp/main_shop.asp?pMode=0&tabID=3" class="page-scroll btn btn-primary pull-right btn-class-signup">Sign-up <i class="fa fa-angle-right"></i></a></p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 text-center">
<div class="rates-text clearfix">
<div class="col-sm-4 col-xs-4">
<img src="photos/flower_silver.png" class="img-responsive center-block flower-icon">
</div>
<div class="col-sm-4 col-xs-4">
<h3 class="mr-top-space"><u>Silver</u></h3>
</div>
<div class="col-sm-4 col-xs-4">
<img src="photos/flower_silver.png" class="img-responsive center-block flower-icon">
</div>
<p>$90</p>
<p>Unlimited Floor Classes</p>
<p>3 Aerial Yoga Classes</p>
<p> </p>
<p><a href="https://clients.mindbodyonline.com/asp/main_shop.asp?pMode=0&tabID=3" class="page-scroll btn btn-primary pull-right btn-class-signup">Sign-up <i class="fa fa-angle-right"></i></a></p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 text-center">
<div class="rates-text clearfix">
<div class="col-sm-4 col-xs-4">
<img src="photos/flower_gold.png" class="img-responsive center-block flower-icon">
</div>
<div class="col-sm-4 col-xs-4">
<h3 class="mr-top-space"><u>Gold</u></h3>
</div>
<div class="col-sm-4 col-xs-4">
<img src="photos/flower_gold.png" class="img-responsive center-block flower-icon">
</div>
<p>$120</p>
<p>Unlimited Floor Classes</p>
<p>6 Aerial Yoga Classes</p>
<p>10% off all Workshops</p>
<p><a href="https://clients.mindbodyonline.com/asp/main_shop.asp?pMode=0&tabID=3" class="page-scroll btn btn-primary pull-right btn-class-signup">Sign-up <i class="fa fa-angle-right"></i></a></p>
</div>
</div>
</div>
<!-- Mobile Monthly Memberships -->
<div class="row visable-xs">
<div class="col-xs-12 text-center">
<h2 class="top-pad">Monthly Memberships<br><br></h2>
</div>
<div class="col-xs-12 text-center">
<div class="rates-text clearfix">
<div class="col-xs-4">
<img src="photos/flower_icon_mobile.png" class="img-responsive center-block flower-icon">
</div>
<div class="col-xs-4">
<h3 class="mr-top-space"><u>Purple</u></h3>
</div>
<div class="col-xs-4">
<img src="photos/flower_icon_mobile.png" class="img-responsive center-block flower-icon">
</div>
<p> </p>
<p>$60</p>
<p>Unlimited Floor Classes</p>
<p> </p>
<p> </p>
<p><a href="https://clients.mindbodyonline.com/asp/main_shop.asp?pMode=0&tabID=3" class="page-scroll btn btn-primary pull-right btn-class-signup">Sign-up <i class="fa fa-angle-right"></i></a></p>
</div>
</div>
<div class="col-xs-12 text-center top-space">
<div class="rates-text clearfix">
<div class="col-xs-4">
<img src="photos/flower_silver_mobile.png" class="img-responsive center-block flower-icon">
</div>
<div class="col-xs-4">
<h3 class="mr-top-space"><u>Silver</u></h3>
</div>
<div class="col-xs-4">
<img src="photos/flower_silver_mobile.png" class="img-responsive center-block flower-icon">
</div>
<p> </p>
<p>$90</p>
<p>Unlimited Floor Classes</p>
<p>3 Aerial Yoga Classes</p>
<p> </p>
<p><a href="https://clients.mindbodyonline.com/asp/main_shop.asp?pMode=0&tabID=3" class="page-scroll btn btn-primary pull-right btn-class-signup">Sign-up <i class="fa fa-angle-right"></i></a></p>
</div>
</div>
<div class="col-xs-12 text-center top-space">
<div class="rates-text clearfix">
<div class="col-xs-4">
<img src="photos/flower_gold_mobile.png" class="img-responsive center-block flower-icon">
</div>
<div class="col-xs-4">
<h3 class="mr-top-space"><u>Gold</u></h3>
</div>
<div class="col-xs-4">
<img src="photos/flower_gold_mobile.png" class="img-responsive center-block flower-icon">
</div>
<p> </p>
<p>$120</p>
<p>Unlimited Floor Classes</p>
<p>6 Aerial Yoga Classes</p>
<p>10% off all Workshops</p>
<p><a href="https://clients.mindbodyonline.com/asp/main_shop.asp?pMode=0&tabID=3" class="page-scroll btn btn-primary pull-right btn-class-signup">Sign-up <i class="fa fa-angle-right"></i></a></p>
</div>
</div>
</div>
は、クラスを追加しました。
おやっの
visible-xs
を使用してみてください。私はそれが私をばかみたいに見せてくれるものだと分かっていました。 – myck