0
試圖在網站上創建單獨的部分，其中一個顯示爲移動< 768 px，另一個顯示所有其他分辨率。在移動顯示器中，它看起來正常顯示。在任何更大的分辨率下，它都會顯示這兩部分bootstrap visable-xs不工作
hidden-xs類用於隱藏移動部分（行），但visable-xs類不能用於僅顯示移動部分（行）。希望這是我忽略的一些事情。
<!-- 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>
加入類：
.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;
}
問題在這裏可以看出，重複每月會員資格。
天哪，謝謝。我知道這是讓我看起來像個白癡的東西。 – myck