使用 col-push 和 col-pull bootstrap 3 定位元素答案

【问题标题】：positioning elements with col-push and col-pull boostrap 3使用 col-push 和 col-pull bootstrap 3 定位元素
【发布时间】：2014-09-16 12:36:14
【问题描述】：

当它是移动视口时，我试图将文本放在图像上方我正在使用 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>

非常感谢。

【问题讨论】：

我不是 bootstrap 用户，但您要查找的内容需要一些 JS 或使用灵活的盒子模型......或使用绝对定位的一些复杂而多毛的 css。
是的，@Jbird 是正确的。 Shawn Taylor 的回答 1 是一种使用 Bootstrap 中内置的 CSS 的方法。推和拉不能垂直工作。

标签： html css grid twitter-bootstrap-3

【解决方案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-* 类，但这最终会完成。

【讨论】：

我喜欢你如何能够想到一种自定义的方式来做到这一点，这绝对是一种有效的方式。在引导程序中使用预定义的工具是一个很好的策略。我使用了自定义 CSS，因为我不喜欢重复元素。作为一个问题，您以前是否以这种方式实施过，我很想看到一个实际的例子。抱歉评论我找不到 PM 选项。
除了这个答案之外，您还可以利用 RESS 方法（带有服务器端组件的响应式设计）根据请求页面的设备类型来提供内容。将设备检测与响应式设计相结合是避免无关标记和优化页面加载时间的好方法。在为移动设备设计时，必须考虑性能。 lukew.com/ff/entry.asp?1392
@TheHamstring Shawn 没有想到这一点，这是创建 OP 描述的设计模式的最常用的解决方案。它已在无数站点中实施。事实上，看看任何典型的响应式网站上的代码，它最有可能被利用。事实上，直到灵活的盒子模型接管世界。
@TheHamstring 是的，bootstrap 是我的首选工具集，因为我很了解它。我知道还有其他解决方案，出于各种原因，有些解决方案更好。在这种情况下，重复标记的少量负载似乎是合理的。但话又说回来，如果页面上最终有数百个图像/评论组合，那就是数百行额外的标记，另一种方式可能是可取的。自定义 CSS 将是我的选择，因为它可以避免重复以及服务器工作。
@Jbird 绝对在我的驾驶室之外，但在许多情况下可能是最好的选择。那个白说，不是我没想到，而是OP问的不是这个。

【解决方案2】：

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

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

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

【讨论】：

【解决方案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>

【讨论】：

感谢您的宝贵时间。