Question

尝试在网站上创建单独的部分，一个显示移动设备＆lt; 768 px，另一个显示所有其他分辨率。在移动显示屏中，它似乎正常显示。在任何更大的分辨率，它显示两个部分。

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>
                        &nbsp; 
                        <p>$60</p>
                        <p>Unlimited Floor Classes</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</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&nbsp;&nbsp;<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> 
                    &nbsp;
                    <p>$90</p>
                    <p>Unlimited Floor Classes</p>
                    <p>3 Aerial Yoga Classes</p>
                    <p>&nbsp;</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&nbsp;&nbsp;<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> 
                &nbsp;
                <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&nbsp;&nbsp;<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>&nbsp;</p>
                        <p>$60</p> 
                        <p>Unlimited Floor Classes</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</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&nbsp;&nbsp;<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>&nbsp;</p>
                    <p>$90</p>
                    <p>Unlimited Floor Classes</p>
                    <p>3 Aerial Yoga Classes</p>
                    <p>&nbsp;</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&nbsp;&nbsp;<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>&nbsp;</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&nbsp;&nbsp;<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;
}

这里可以看到问题，重复每月会员资格。

Answer 1

尝试使用visible-xs代替visable-xs

bootstrap visable-xs无效

1 个答案: