Question

我试图将文字置于图像上方，当它是移动视口时，我正在使用twitter bootsrap 3帮助程序类col-push和col-pull但我可以让它工作。

这很像我的html，我喜欢有三个span4的行。每个span4需要在图像底部关联图像和文本。当视口移动时，我需要切换图像位置的文本位置（文本顶部，图像底部）。

我无法弄清楚..任何人都可以帮我解释一下真正的col-push和col-pull是如何工作的，或者我错过了什么来使这个工作？

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css">
            <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        </head>
        <body>
    <div class="container row">
        <div class='col-lg-4'>
            <a class="" href="#" target="_self">
                <img src="https://d13yacurqjgara.cloudfront.net/users/31371/screenshots/269938/400x300.png">
            </a>
            <span class=''>Put some text in this area</span>
        </div>
        <div class='col-lg-4'>
            <a class="" href="#" target="_self">
                <img src="https://d13yacurqjgara.cloudfront.net/users/31371/screenshots/269938/400x300.png">
            </a>
            <span class=''>Put some text in this area</span>
        </div>
        <div class='col-lg-4'>
            <a class="" href="#" target="_self">
                <img src="https://d13yacurqjgara.cloudfront.net/users/31371/screenshots/269938/400x300.png">
            </a>
            <span class=''>Put some text in this area</span>
        </div>
    </div>

        </body>
    </html>

非常感谢。

Answer 1

您也可以在没有任何自定义CSS的情况下执行此操作，但可以使用hidden-*/visible-*类重复部分标记并根据设备显示/隐藏它：

<强> http://www.bootply.com/evXH6jijLe

<div class="container">
   <div class="col-lg-4">
     <p class="visible-xs">Text Mobile 1</p>
        <img src="img.png">
     <p class="hidden-xs">Text Desktop 1</p>
    </div>
   <div class="col-lg-4">
     <p class="visible-xs">Text Mobile 2</p>
        <img src="img.png">
     <p class="hidden-xs">Text Desktop 2</p>
    </div>
   <div class="col-lg-4">
     <p class="visible-xs">Text Mobile 3</p>
        <img src="img.png">
     <p class="hidden-xs">Text Desktop 3</p>
    </div>

您可能需要更具体地了解您使用的hidden-*/visible-*个类，但这最终会完成。

Answer 2

Col-push和col-pull允许您水平放置元素。那些元素定位仍然最终由它们在DOM中的位置控制，不幸的是它不会影响垂直定位。看起来你想让文本和图像交换。你可以这样做的方法是将标记切换为顶部的文本，因为垂直尺寸的变化比桌面视图中的图像更大。

当您的网站位于桌面视图中时，将图像周围的锚标记的位置设置为绝对位置。将margin-top设置为包含文本的范围，将其推到图像下方。当您点击移动断点时，将锚点位置设置为块并从跨度中移除边距。

确保包含这些元素的div具有相对位置，以便图像位于容器内。

Answer 3

感谢Shawn Taylor，我终于完成了Bootstrap Grid的工作。当您从桌面浏览器查看页面时，现在所有项目都在一行上。为了实现这一点，我需要将Bootsrap样式表引用更改为：href="http://getbootstrap.com/dist/css/bootstrap.min.css"。如果您使浏览器窗口变小，您的项目就会像使用手机时一样堆叠起来。但是，我没有得到推动和拉动工作。相反，我使用Shawn Taylor根据视口大小隐藏元素的非常巧妙的解决方案;因此，当您在移动设备上查看该页面时，您应该以正确的顺序堆叠项目。

<!DOCTYPE html>
<html lang="en">
        <head>
            <link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css">
            <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css"> 
        </head>
        <body>
     <div class="container">
    <div class="row">     
        <div class="col-lg-4 col-md-4">
            <div class="row">
                <div class="col-lg-12 col-md-12 hidden-xs">
                    <a  href="#" target="_self">
                        <img src="https://d13yacurqjgara.cloudfront.net/users/31371/screenshots/269938/400x300.png">
                    </a>
                </div>
                 <div class="col-lg-12 col-md-12 hidden-xs">
                    Put some text in this area
                </div>
            </div>
             <div class="row">
                <div class="col-xs-12 hidden-lg hidden-md">
                    Put some text in this area
                </div>
                 <div class="col-xs-12 hidden-lg hidden-md">
                    <a  href="#" target="_self">
                        <img src="https://d13yacurqjgara.cloudfront.net/users/31371/screenshots/269938/400x300.png">
                    </a>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-4">
            <div class="row">
                <div class="col-lg-12 col-md-12 hidden-xs">
                    <a  href="#" target="_self">
                        <img src="https://d13yacurqjgara.cloudfront.net/users/31371/screenshots/269938/400x300.png">
                    </a>
                </div>
                 <div class="col-lg-12 col-md-12 hidden-xs">
                    Put some text in this area
                </div>
            </div>
             <div class="row">
                <div class="col-xs-12 hidden-lg hidden-md">
                    Put some text in this area
                </div>
                 <div class="col-xs-12 hidden-lg hidden-md">
                    <a  href="#" target="_self">
                        <img src="https://d13yacurqjgara.cloudfront.net/users/31371/screenshots/269938/400x300.png">
                    </a>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-4">
            <div class="row">
                <div class="col-lg-12 col-md-12 hidden-xs">
                    <a  href="#" target="_self">
                        <img src="https://d13yacurqjgara.cloudfront.net/users/31371/screenshots/269938/400x300.png">
                    </a>
                </div>
                 <div class="col-lg-12 col-md-12 hidden-xs">
                    Put some text in this area
                </div>
            </div>
             <div class="row">
                <div class="col-xs-12 hidden-lg hidden-md">
                    Put some text in this area
                </div>
                 <div class="col-xs-12 hidden-lg hidden-md">
                    <a  href="#" target="_self">
                        <img src="https://d13yacurqjgara.cloudfront.net/users/31371/screenshots/269938/400x300.png">
                    </a>
                </div>
            </div>
        </div>
    </div>
   </div>
        </body>
    </html>

定位元件采用col-push和col-pull bootstrap 3

3 个答案: