天道酬勤,学无止境

Bootstrap Pull 和 Push 是如何工作的(How does Bootstrap Pull and push work)

问题

我正在尝试修复一个没有像插图那样引导的页面。 但是我的col-2col-3col-4与 col 1 和col-4不对齐。我无法真正理解拉和推是如何工作的。 我已经处理了我的移动布局,看起来不错,但是当它进入桌面时,它会弄乱布局。

我的布局变成这样,当我把它变成桌面时。 它下面的标题和列未对齐。

回答1

您需要将黄色 div-s 包含row这样它们就不会跳过下一行。

 .left-box { height: 290px; width: 100%; background: #e66; margin: 3px; } .right-box { height: 70px; background: #ee6; margin: 3px; } @media screen and (min-width: 992px) { .left-box, .right-box { height: 200px; } }
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-md-2 col-xs-5"> <div class="left-box"></div> </div> <div class="col-md-10 col-xs-7"> <div class="row"> <div class="col-md-3"><div class="right-box"></div></div> <div class="col-md-3"><div class="right-box"></div></div> <div class="col-md-3"><div class="right-box"></div></div> <div class="col-md-3"><div class="right-box"></div></div> </div> </div> </div> </div>

注意:根据引导规则,语句class="col-md-2 col-sm-5"class="col-lg-2 col-md-2 col-sm-5 col-xs-12"

回答2

实际上,我认为您不需要推拉课程。 你可以使用这样的标记:

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="left-box"></div>
        </div>
        <div class="col-md-6">
            <div class="right-box"></div>
            <div class="right-box"></div>
            <div class="right-box">etc...</div>
        </div>
    </div>
</div>

笔:http://codepen.io/anon/pen/yVKgwG

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 在Twitter Bootstrap 3中使用col-lg-push和col-lg-pull进行列顺序操作(Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3)
    问题 我现在正在阅读Twitter Bootstrap 3上的文档,并试图按照此页面上显示的列顺序进行操作,但遇到了麻烦。 我不明白为什么这样的代码有效,也不知道如何正确指定设置。 我要显示的是一个网格,它由长度5,另一个长度5和最后一个长度2网格组成。 所以我的是这样的: [5] [5] [2] 我要实现的是,在桌面上查看时,会显示上面的布局,但是在移动设备上查看时,我想先显示第二个长度为5的对象,然后是第一个长度为5的对象,最后是长度为2的对象, 垂直。 像这样: [5] (second) [5] (first) [2] 尽管我尝试遵循上述文档中介绍的步骤,但尽管在移动平台上,我还是得到了第一个长度为5的对象,尽管它位于移动平台上,正如我所说的,它应该在顶部显示第二个长度为5的对象。 换句话说,我得到了: [5] (first) [5] (second) [2] 那么,如何正确地将第二个放在第一个之上呢? 还是因为我使用相同长度的对象,列排序不能正常工作吗? 这是我的代码供您参考: <div class='row'> <div class='col-lg-5 col-lg-push-5'></div> <div class='col-lg-5 col-lg-pull-5'></div> <div class='col-lg-2'></div> </div> 此外,文档没有阐明“
  • 一文看懂Git常用操作
    本文内容90%都来自廖雪峰的Git教程,这里仅做学习记录,有理解不对的地方还望指正。 一、关键词理解 1. 工作区(Working Directory): 就是你在电脑里能看到的目录,比如我的learngit文件夹就是一个工作区(通过git init进行设定,就在工作区创建了.git的版本库)———其实是不建议称呼“工作树”,只不过大家叫习惯了,就这么叫吧。 2. 工作树(Working tree) 这部分内容似乎很少有人讲。其实工作树才是我们应该重点理解的 2.1 工作树和工作区的范围关系 工作树位于工作区,但是并非工作区的所有文件都属于工作树。当我们在工作区新建了一个文件,并且没有做接下来的其他工作,这时工作树是能检测到该文件的,你可以利用git status进行检测,结果应该显示untracked file。但是工作树其实并没有把该文件放置到他的任意位置,也就是说该在棵树上是没有登记过这个文件,该文件没有这棵树的树籍,他是一个相对于工作树处于untracked file的状态,如果这时我们用如下命令会失败: git rm shot.txt # 假设我们这里创建了一个文件 shot.txt,且没有执行命令 git add shot.txt 结果显示: fatal: pathspec 'shot.txt' did not match any files # 反馈:路径声明
  • Bootstrap 3:如何使用推拉将左侧边栏放到内容下方(Bootstrap 3: How to drop the left sidebar drop below content using push-pull)
    问题 我正在使用 Bootstrap 3 并且在移动设备上我想垂直堆叠所有 div(侧边栏和内容)并将左侧侧边栏放置在移动 (xs) 设备上的主容器下方(当前位于左侧侧边栏的右侧)。 HTML,看起来像这样 <div class="container"> <div class="row"> <div class="col-sm-3 col-xs-push-9"> Sidebar</div> <div class="col-sm-9 col-xs-pull-3"> Main Container</div> </div> 上面的问题是,在侧边col-xs-pull-3上使用col-xs-push-9并在主容器上使用col-xs-pull-3它们在大型( lg )中( md )和( sm )设备上以相反的顺序出现。 我不想颠倒顺序,而只想在超小型移动设备上的主容器下方有左侧边栏。 我想要一个引导解决方案,而不是一个 JS/jQuery 解决方案。 请帮忙。 问候,dk 回答1 如果您认为“移动优先”,请先按所需的移动顺序排列列,然后使用推/拉来调整更大屏幕的列。 <div class="container"> <div class="row"> <div class="col-sm-9 col-sm-push-3"> Main Container</div> <div class=
  • 使用 bootstrap push 和 pull 更改列顺序(Change column order using bootstrap push and pull)
    问题 我有 3 列,按以下顺序排列: <div class="container-fluid"> <h1>Hello World!</h1> <p>Resize the browser window to see the effect.</p> <div class="row"> <div class="col-sm-3">left column</div> <div class="col-sm-6">center column</div> <div class="col-sm-3">right column</div> </div> </div> 我想通过推拉重新订购。 我需要顶部的中心列,以及大小为 6 的其他列。 回答1 我找到了一个很好的答案,它可能对您有用 Twitter Bootstrap 3 中使用 col-lg-push 和 col-lg-pull 进行列顺序操作 Bootstrap 是一个“移动优先”框架,因此您的 HTML 应该反映您网站的移动版本。 然后在更大的屏幕上完成推和拉。 回答2 由于 bootstrap-3 被设计为“移动优先”,您应该重新考虑如何设置列。 您应该按照您希望它在移动设备上的外观进行设计……好吧,首先,然后随着屏幕变大进行推/拉调整(或任何其他调整)。 所以: <div class="row"> <div class="col-sm-6
  • Bootstrap 3 处理 xs 和 sm 之间的差异(Bootstrap 3 dealing with difference between xs and sm)
    问题 我将 col-xs-* 用于纵向移动设备,但天真地认为 col-sm-* 用于横向移动设备,但是,根据此问题的第一个答案,实际上并非如此。 所以我的问题是如何有效地将 col 结构用于横向手机? 我的想法是: 垂直移动设备上的 col-xs-12 横向移动设备上的 col-sm-6(因为它显然更宽) 但是,因为 sm 不是我最初认为的那样,这是否可能在不更改核心引导程序 CSS 的情况下实现? 例如,如果我们看一下 iPhone 6+,在它的横向方向上,它的宽度是 736px,这仍然被认为是在 xs 的范围内。 所以这个视口中的任何 col-xs-12 看起来都非常巨大,这让事情看起来很糟糕。 理论上我可以将 sm 断点更改为低于当前值 768,但是有更好的方法吗? 也许在 xs 和 sm 之间添加一个类? 更新 我还从另一个问题中找到了这个片段,它有潜力。 @media only screen and (min-width: 480px) and (max-width: 767px) { .col-xsl-6{ width: 50%; } } 回答1 最简单的方法是使用 LESS 并更改sm断点: @import "bootstrap.less"; @screen-sm-min: 736px; http://www.codeply.com/go/g3Qtejhoui
  • How do I change Bootstrap 3 column order on mobile layout?(How do I change Bootstrap 3 column order on mobile layout?)
    问题 我正在使用顶部固定的导航栏进行响应式布局。 在下面,我有两列,一列用于侧栏(3),一列用于内容(9)。 在桌面上看起来像这样 导航栏 [3] [9] 当我resize以移动时, navbar被压缩并隐藏,然后将侧边栏堆叠在内容的顶部,如下所示: 导航栏 [3] [9] 我想要顶部的主要内容,因此我需要将移动设备的顺序更改为此: 导航栏 [9] [3] 我发现这篇文章涵盖了相同的要点,但是接受的答案已经过编辑,说该解决方案不适用于当前版本的Bootstrap。 如何在移动设备上重新排列这些列? 或者,如何将sidbar列表组放入正在扩展的导航栏中? 这是我的代码: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz
  • Bootstrap 4中带有push / pull和col-md-12的列排序(Column ordering in Bootstrap 4 with push/pull and col-md-12)
    问题 我有两列,每个列的类为col-md-12 。 在桌面视图中,它们应显示为: Col **1** Col **2** 在移动视图中,应显示如下: Col **2** Col **1** 使用Bootstrap的列排序是否有可能? 我当前的代码: <div class="row"> <div class="col-xs-push-12 col-md-12"> Col 1 </div> <div class="col-xs-pull-12 col-md-12"> Col 2 </div> </div> 回答1 更新(2018年2月)-v4 + 现在已经发布了引导程序,您可以像在beta版中一样使用order实用程序类(请参见下面的旧更新)来实现这一点,区别在于他们添加了这3个新类: .order-first { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .order-last { -webkit-box-ordinal-group: 14; -ms-flex-order: 13; order: 13; } .order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } 片段 .p-2 { background: red
  • 通过Bootstrap4订购列(Order columns through Bootstrap4)
    问题 我想在台式机和移动设备上以不同的方式订购3列。 目前,我的围裙看起来像这样: <div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md-6"> 2 </div> <div class="col-xs-6 col-md-12"> 3 </div> </div> 在移动视图中,我想要以下输出: 1-3-2 不幸的是,我不知道如何使用Bootstrap 4中的.col-md-push-*和.col-md-pull-*类解决此问题。 回答1 2018年-使用最新的Bootstrap 4。 响应式排序类现在order-first , order-last和order-0 - order-12 该引导4推挽类是现在push-{viewport}-{units}和pull-{viewport}-{units}和xs-缀已被删除。 要在移动设备/ xs上获得所需的1-3-2布局,请执行以下操作:Bootstrap 4推拉演示(仅适用于4.0 beta之前的版本) Bootstrap 4.1+ 由于Bootstrap 4是flexbox,因此更改列的顺序很容易。 可以响应于cols从order-1到order-12进行order-12 ,例如相对于父.row order-md
  • 使用Bootstrap 3打印页面(Printing page with bootstrap 3)
    问题 我一直在这里查看关于stackoverflow的很多答案,这些答案半发现了我想知道的事情,但是还没有找到对我有用的东西。 我了解A4的打印页面约为550像素,因此引导程序将使用通常用于移动设备的样式和布局。 当我在网页上使用Ctrl + P时,可打印页面看起来就像页面的移动版本一样。 但是,如何使它看起来像台式机版本? (媒体> 1024像素)有没有办法做到这一点? 我知道我可以更改CSS专门用于打印。 但是如何使用bootstrap 3网格系统解决这个问题呢? div的宽度基于我为col-xs添加的宽度,但是我希望打印为col-md使用布局(宽度) 编辑:在我为此奋斗了几个小时之后,我意识到它可能比我最初预期的要复杂。 仅改变宽度并不能解决我的问题。 我的许多div都具有以下语法: <div class="md-right sm-right xs-down col-md-1 col-sm-2 box"></div> 或者 <div class="col-md-4 col-sm-6 col-xs-12"></div> 对于小型设备,该页面在XS中看起来不错,但是在XS中进行打印会使许多元素看起来非常庞大。 因此问题仍然存在。 有没有一种方法可以使打印页面看起来与中型或大型设备的布局相同?
  • Bootstrap 3:添加一组新列(Bootstrap 3: adding a new set of columns)
    问题 我已经使用Bootstrap 3一段时间了,现在我需要为水平移动设备(例如384px屏幕宽度)制作一组新的额外小列,然后按以下方式使用它: col-xxs-1 , col-xxs-2 , col-xxs-offset-5 , hidden-xxs等 是否为此目的提供了一些Bootstrap Less mixins? 我不确定如何使用它们 编辑: 有一个名为.make-grid()的Bootstrap mixin,但我无法使其正常工作。 回答1 col-xxs-x , col-xxs-offset , col-xxs-push , col-xxs-pull : 添加此代码: .col-xxs-1, .col-xxs-2, .col-xxs-3, .col-xxs-4, .col-xxs-5, .col-xxs-6, .col-xxs-7, .col-xxs-8, .col-xxs-9, .col-xxs-10, .col-xxs-11, .col-xxs-12 { min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative; } @media (max-width: 384px) { .col-xxs-1, .col-xxs-2, .col-xxs-3, .col-xxs-4,
  • Bootstrap 3:向右拉仅适用于col-lg(Bootstrap 3: pull-right for col-lg only)
    问题 引导程序3的新手。...在我的布局中,我有: <div class="row"> <div class="col-lg-6 col-md-6">elements 1</div> <div class="col-lg-6 col-md-6"> <div class="pull-right"> elements 2 </div> </div> </div> 我希望'elements 2'在小于col-lg的屏幕上不对齐。 如此有效地让类只向col-lg-6右推... 我怎样才能做到这一点? 这是一个小提琴:http://jsfiddle.net/thibs/Y6WPz/ 谢谢 回答1 您可以将“ element 2”放在较小的列中(即col-2 ),然后仅在较大的屏幕上使用push : <div class="row"> <div class="col-lg-6 col-xs-6">elements 1</div> <div class="col-lg-6 col-xs-6"> <div class="row"> <div class="col-lg-2 col-lg-push-10 col-md-2 col-md-push-0 col-sm-2 col-sm-push-0 col-xs-2 col-xs-push-0"> <div class="pull-right"
  • Bootstrap 3断点和媒体查询(Bootstrap 3 breakpoints and media queries)
    问题 在Bootstrap 3媒体查询文档中,该文档显示: 我们在Less文件中使用以下媒体查询在网格系统中创建关键断点。 超小型设备(电话,小于768像素):无媒体查询,因为这是Bootstrap中的默认设置小型设备(平板电脑,768像素及以上) @media (min-width: @screen-sm-min) { ... } 中型设备(台式机,992px及以上) @media (min-width: @screen-md-min) { ... } media @media (min-width: @screen-md-min) { ... } 大型设备(大型台式机,1200px及以上) @media (min-width: @screen-lg-min) { ... } media @media (min-width: @screen-lg-min) { ... } 我们是否应该能够在媒体查询中使用@screen-sm , @screen-md和@screen-lg名称? 因为它对我不起作用。 我必须先使用@media (min-width: 768px) {...}类的像素测量,然后才能起作用。 难道我做错了什么? 另外,对于超小型设备的480px的引用是否是错字? 那不应该说到767px吗? (因为已从文档中删除) 回答1 Bootstrap 4媒体查询 //
  • Bootstrap 3:在行上推/拉列(Bootstrap 3: Push/pull columns over rows)
    问题 我在手机上有这样的布局: --------- | 1 | --------- | 2 | --------- | 3 | --------- 对于更大的屏幕,我想要这样: ----------------------------------- | 1 | 3 | ----------------------------------- | 2 | ----------------------------------- 代码,它不起作用,因为拉/推一排:-( <div class="row clearfix"> <div class="col-sm-9 alert alert-info"> 1 </div> <div class="col-sm-3 col-sm-push-3 alert alert-warning"> 2 </div> <div class="col-sm-3 col-sm-pull-3 alert alert-debug"> 3 </div> </div> http://jsfiddle.net/QtPd2/27/ 回答1 由于推和拉通过设置left或right属性来工作,它永远不会像您指出的那样换行到另一行。 一种解决方案是复制第 2 列或第 3 列的内容(采用内容或交互性最少的那个)。 将一个xs和另一个隐藏在sm 、 md和lg 。 在下面的示例中
  • 引导程序下拉气泡右对齐(非右推)(bootstrap dropdown bubble align right (not push-right))
    问题 我的顶部菜单中有购物车,使用push-right ,但我的问题是下拉菜单气泡不在页面中。 我正在尝试将气泡右对齐,以使其与“点击”右对齐 像这样 HTML: <div class="cart pull-right"> <ul class="nav"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">CLICK</a> <div class="dropdown-menu"> STUFF </div> </li> </ul> </div> 回答1 Bootstrap 3.1+ 将类.dropdown-menu-right添加到包含类dropdown-menu的同一div中: <div class="dropdown-menu dropdown-menu-right"> STUFF </div> http://getbootstrap.com/components/#dropdowns-alignment Bootstrap 2.3和3.0 将类.pull-right添加到包含类dropdown-menu的同一个div中 <div class="dropdown-menu pull-right"> STUFF </div> 这似乎对我使用引导3.0工作 回答2
  • 使用推/拉更改Bootstrap中col-*-12列的顺序(Change the order of col-*-12 columns in Bootstrap using push/pull)
    问题 我有两列大小相同的( .col-xs-12 ),并且当屏幕大小与移动设备的屏幕大小相对.col-xs-12 ,我会更改它们的位置。 我将它们以相反的顺序放置。 我已经读过push和pull bootstrap指令有助于实现这一点,但是是否可以通过以下类更改相同大小的两列的位置? div.col-xs-12.col-xs-push-12 p test1 div.col-xs-12.col-xs-pull-12 p test2 回答1 实际上,您不能通过push / pull帮助器类对具有.col-*-12的列进行重新排序。 列的总和超过了@grid-columns定义的默认12 @grid-columns 。 您可以更改HTML中列的顺序,然后按如下所示在较大的屏幕上使用排序类: 这里的例子 <div class="row"> <div class="col-xs-12 col-sm-6 col-sm-push-6"> <p>test2</p> </div> <div class="col-xs-12 col-sm-6 col-sm-pull-6"> <p>test1</p> </div> </div> 或使用这种奇特的方法来反转垂直放置在彼此下方的列的顺序: 这里的例子 @media (max-width: 767px) { .row.reorder-xs {
  • How does Bootstrap Pull and push work
    I am trying to fix a page which wasn't bootstrapped like the illustration. But my col-2, col-3, col-4 don't align with the col 1 and 2. I cannot really understand how pull and push work. I have worked on my mobile layout and it seem fine, but as it goes to desktop, it messing the layout. My layout becomes this, when I make it go desktop. Misaligned headings and columns under it.
  • 使用 Gitee 进行代码管理(包括本地仓库如何同时关联Git和Gitee)
    目录 使用Gitee使用GitHub 使用Gitee 使用GitHub时,国内的用户经常遇到的问题是访问速度太慢,有时候还会出现无法连接的情况(原因你懂的)。 如果我们希望体验Git飞一般的速度,可以使用国内的Git托管服务——Gitee(gitee.com)。 和GitHub相比,Gitee也提供免费的Git仓库。此外,还集成了代码质量检测、项目演示等功能。对于团队协作开发,Gitee还提供了项目管理、代码托管、文档管理的服务,5人以下小团队免费。 Gitee的免费版本也提供私有库功能,只是有5人的成员上限。 使用Gitee和使用GitHub类似,如果不会,可以观看我的前一篇GitHub的注册与使用(小白教程) 我们在Gitee上注册账号并登录后,需要先上传自己的SSH公钥。选择右上角用户头像 -> 菜单“修改资料”,然后选择“SSH公钥”,填写一个便于识别的标题,然后把用户主目录下的.ssh/id_rsa.pub文件的内容粘贴进去: 点击“确定”即可完成并看到刚才添加的Key: 如果我们已经有了一个本地的git仓库(例如,一个名为Git的本地库),如何把它关联到Gitee的远程库上呢? 首先,我们在Gitee上创建一个新的项目,选择右上角用户头像 -> 菜单“+”,然后点击“新建仓库”: 项目名称最好与本地库保持一致: 然后,我们在本地库上使用命令git remote
  • Twitter Bootstrap:以小分辨率并排放置元素?(Twitter Bootstrap: Place elements side by side in small resolution?)
    问题 我正在努力使我的设计具有响应性。 到目前为止我已经成功了,但我在对齐方面遇到了一些问题。 如下图所示,设计朝左。 红框是页面的实际中心(稍后绘制): 这不应该发生,因为我已将 div 包含在容器类中。 为什么还会发生? 我希望标题和缩略图始终位于页面的完美中心。 还有一个稍微不同的问题。 在缩小浏览器的大小时,即使浏览器有空间可以并排容纳 2 个缩略图,它仍然只显示一个。 这看起来非常奇怪,我想放入 2 个缩略图,只要它可以无杂乱地容纳它们。 我添加了 col-sm-6 类,但它的行为仍然没有太大不同。 我无法添加 col-xs-6,因为在极小的设备上,我只想看到 1 个缩略图。 所以我相信我们必须为此编写媒体查询? 应该做什么? HTML/CSS 文件在这里,网站在这里托管。 实施@The Indian Programmer 建议的更改: 嘿,那行得通(有问题)! 为什么使它 200px 扭曲中心对齐? 使宽度:100% 自动导致我的悬停状态动画溢出图像之外。 我们如何解决这个问题? 不! 我不希望它是 col-xs-6。 也就是说,我不想要小型设备中的 2 个缩略图。 这是它的外观: 所以,这就是我所做的: <div class="col-md-3 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="images
  • 在GitHub上更新分叉存储库(Update of forked repository on github)
    问题 我从github分叉了一个存储库-它称为bootstrap。 我已经克隆了我的叉子: git clone https://github.com/Fowowski/bootstrap.git bootstrap项目有一个master分支和一个3.0.0-wip分支-不适用于3.0.0-wip 因此,我接下来要做的事情(因为im在master上,并且它是2.3.x稳定版)切换到3.0.0-wip并添加一个远程: git checkout 3.0.0-wip git remote add upstream https://github.com/twitter/bootstrap.git 现在我在1文件中进行了一些更改...几天后,我意识到3.0.0-wip中存在一些更改,并且我的分叉存储库不再实际。 我应该如何更新派生的存储库,使其与仅在请求请求中推送的存储库一样整洁? 我听说我应该进行提取/变基处理。 我确实通过乌龟git进行过一次pull ,而在我推过之后,在我的拉取请求中几乎没有我提交的提交...-您可以在这里看到它:https://github.com/twitter/bootstrap/pull/7641#commits -pushed-2eb9053-我以为我没有做任何重要的事情,但不知道是什么。 我对问题进行了一些研究,发现可能应该运行: git fetch
  • 如何更改列的堆叠顺序?(How to change stacking order of columns?)
    问题 使用 Bootstrap 3,我有一个非常简单的布局,如: <div class="container"> <div class="row"> <div class="col-sm-4"> Header Content Left </div> <div class="col-sm-4"> Header Content Middle </div> <div class="col-sm-4"> Header Content Right </div> </div> </div> JSFiddle 在较小的设备上,我希望它不是按自然顺序堆叠,而是像这样堆叠: Header Content Middle Header Content Right Header Content Left 我被困在如何实现这一目标上,有人能指出我正确的方向吗? 回答1 Bootstrap 的col-**类有position: relative; 财产。 因此,当您额外设置col-**-push-**或col-**-pull-**类时,您可以使用left或right属性更改列顺序移动。 你可以这样试试: <div class="container"> <div class="row"> <div class="col-sm-4 col-sm-push-4"> Header Content Middle <