html - CSS 样式无法在手机上正确隐藏图像

Question

我正在建立一个网站，试图找出如何 this page可以这样做:

我查看了他们页面中的 .css 和 HTML，以了解他们如何构建类似的东西。

嗯...这是我的结果:

问题是当我尝试在手机上显示网站时，我无法隐藏我的图像，而且如果我在图像的 div 中设置“hidden-xs”，文本也不会居中。

在左侧你可以看到我想做什么在右侧我的结果:

HTML

<div class="white_bg">
    <div id="mobile-app-sections" class="container">
        <div class="container-medium">
            <div class="row">
                <div class="col-xs-5 into-row border app-image-wrap">
                    <img class="app-phone" src="img/device.jpg">
                </div> <!--col-->
                <div class="col-xs-7 into-row border">
                    <h2>foodpress in your mobile! </h2>
                    <h3 class="green-text">Get our app, it's the fastest way to order food on the go.</h3>

                    <div class="row border" id="getapp-wrap">
                        <div class="col-xs-4 border">
                            <a href="http://" target="_blank">
                                <img class="get-app" src="img/get-app-store.png">
                            </a>
                        </div>
                        <div class="col-xs-4 border">
                            <a href="http://" target="_blank">
                                <img class="get-app" src="img/get-google-play.png">
                            </a>
                        </div>
                    </div> <!--row-->
                </div> <!--col-->
            </div> <!--row-->
        </div> <!--container-medium-->

        <div class="mytable border" id="getapp-wrap2">
            <div class="mycol border">
                <a href="http://" target="_blank">
                    <img class="get-app" src="img/get-app-store.png">
                </a>
            </div> <!--col-->
            <div class="mycol border">
                <a href="http://" target="_blank">
                    <img class="get-app" src="img/get-google-play.png">
                </a>
            </div> <!--col-->
        </div> <!--mytable-->
    </div> <!--container-->
</div><!-- End white_bg -->

CSS

    /* CUSTOM CSS */

img{
    max-width:100%;
    height:auto;
}

.border{
    border:0px solid red;
}


.mytable{
    display:table;
    width:100%;
}

.mytable .mycol{
    display:table-cell;
}

#mobile-app-sections{
    padding-top:30px;
}

.container-medium {
    max-width:800px;
    margin:auto;
}

#mobile-app-sections h2{
    margin-top:22%;
}

#mobile-app-sections h3{
    margin:auto auto 25px;
}

#getapp-wrap2{
    margin:auto;
    width:300px;
}

#getapp-wrap2 img{
    max-width:130px;
}

#getapp-wrap2 .mycol{
    width:150px;
}

#getapp-wrap2{
    display:none;
}

我从 this site 中获取的 HTML 和 CSS试图找出如何解决我的问题。

我做错了什么？

我想隐藏的图像也有这个类:class="app-phone"我在页面中找不到(可能是这里的问题？)。

感谢您的帮助!

Answer 1

当您隐藏图像时，文本不会居中，因为它仍然限制在总共 12 列中的 7 列。您需要在移动设备上使用完整的 12 个列，然后在下一个标准断点大小(小)下限制为 7 个。

<div class="hidden-xs col-sm-5 into-row border app-image-wrap">
    <img class="app-phone" src="img/device.jpg">
</div> <!--col-->

<div class="col-xs-12 col-sm-7 into-row border">

进一步阅读:http://getbootstrap.com/css/#grid