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