正文 

当前位置： 首页 > 问答 >

在桌面和移动视图上重新排序引导列

     2023-03-06     222

关键词：

【中文标题】在桌面和移动视图上重新排序引导列【英文标题】：Re-ordering bootstrap columns on desktop and mobile views 【发布时间】：2015-08-05 19:35:02 【问题描述】：

基本上，我希望右侧边栏中的某个列（搜索）在移动设备上位于顶部，并且在桌面视图上仍保持右侧边栏。

这就是我目前所拥有的......

<div class="container">
    <div class="col-md-3 col-md-push-9">B</div>
    <div class="col-md-9 content col-md-pull-3">A</div>
    <div class="col-md-3 col-md-push-9">C</div>
</div>

在移动设备上看起来像这样（这是我想要的）

| B |
| A |
| C |

但是，在桌面上，它看起来像这样（B 和 C 之间存在我不想要的差距）

| A | B |
| A |   |
|   | C |

它的外观如下：http://www.codeply.com/go/guzmu84ybo

有什么想法吗？

【问题讨论】：

它看起来不像 Bootply 中的第二个结构：bootply.com/5v9bsQfwQg 如果 A 的内容足够长就可以了。 抱歉，没有意识到我需要注册才能保存代码 sn-p。给你，codeply.com/go/guzmu84ybo 【参考方案1】：

尝试重新排列结构并使用flexbox 概念重新排列移动设备中的列：

HTML

<div class="container">
  <div class="col-md-9 one">
    <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
    <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
  </div>
  <div class="col-md-3 two">B</div>
  <div class="col-md-3 three">C</div>
</div>

CSS

@media (max-width: 991px) 
  .container 
    display: flex;
    flex-direction: column;
  

  .one 
    order: 2;
  

  .two 
    order: 1;
  

  .three 
    order: 3;

CodePly

【讨论】：

太棒了！正是我想要的。我选择了这个而不是另一个，因为它看起来更灵活。【参考方案2】：

Working Codeply Solution

虽然 flexbox 可能是解决此流程问题的最现代方法，但有些人可能正在寻找简单的“引导程序”解决方案或适用于 IE10+ 的解决方案。单个媒体查询将解决您的问题，您可以删除所有 push/pull 类。您可以将标记简化为：

<div class="container">
    <div class="row">
        <div id="searchWrap" class="col-md-3">B</div>
        <div class="col-md-9 content">
            <p>Lorem Ipsum... This content can be long now... </p>
        </div>
        <div class="col-md-3">C</div>
    </div>
</div>

那么在你的 CSS 中需要这个单一的媒体查询来有效地“重置”导致你所有问题的 left 属性：

@media (min-width : 992px)  
    #searchWrap  
        float: right;
        left: 0px;

您可以将992px 更改为您希望搜索流到顶部的任何宽度。但是 992px 是 Bootstrap 3 的“平板电脑宽度”网格中的宽度，并且很可能是这种重新流动发生的合适宽度。 （查看所有 Bootstrap 3 网格宽度here。）

【讨论】：

使用 flex order 属性重新排列桌面和移动视图的项目

】使用flexorder属性重新排列桌面和移动视图的项目【英文标题】：Usingflexorderpropertytore-arrangeitemsfordesktopandmobileviews【发布时间】：2017-04-2820:30:09【问题描述】：我在一个容器中有3个div。没有嵌套的div。我正在使用flex和order属性... 查看详情

Bootstrap 3 - 移动设备上的桌面视图

】Bootstrap3-移动设备上的桌面视图【英文标题】：Bootstrap3-desktopviewonamobiledevice【发布时间】：2014-03-1413:03:45【问题描述】：在移动设备上是否可以将引导网站显示为桌面版本？基本上该页面将显示992像素或1200像素的视口，而不... 查看详情

引导进度条未在移动视图中显示

...我正在将此代码用于进度条，它在我的笔记本电脑和其他桌面设备上运行良好，但在移动视图中没有显示进度条：<divclass="container"><divclass="progress"><divclass="pro 查看详情

从引导网格列到轮播

...实现的目标。我目前有一个显示1行和4列的引导网格。在桌面设备上，4列彼此相邻出现在平板电脑上，它们显示在2x2网格中，而在移动设备中，它们显示为4行1列。是否有可能在平板电脑或移动设备上设置一个轮播，让我可以在4... 查看详情

如何垂直重新排序引导列

】如何垂直重新排序引导列【英文标题】：Howtoreorderbootstrapcolumnsvertically【发布时间】：2018-04-2113:23:47【问题描述】：我正在尝试在Bootstrapv3中构建以下布局：|Small|Large||--------------|--------------------||[A]|[A][B]||[A.1]|[A.1]||[B]||虽然这... 查看详情

如何在手机上显示桌面视图？ [复制]

】如何在手机上显示桌面视图？[复制]【英文标题】：Howtoshowdesktopviewonmobile?[duplicate]【发布时间】：2017-01-2315:28:31【问题描述】：您好，我想在移动设备上禁用移动视图（响应式），我的意思是当有人从移动设备访问我的网站时... 查看详情

引导网站中的滑块图像不适合移动视图

...引导网站中有一个滑块，该网站的链接是here滑块图像在桌面设备上工作正常，但在移动设备上它不适合屏幕，我做了以下css：@mediaonlyscreenand(max-width:600px).n2-ss-slider[ 查看详情

在移动设备上垂直堆叠的引导列

】在移动设备上垂直堆叠的引导列【英文标题】：Bootstrapcolumnsstackingverticallyonmobiledevice【发布时间】：2017-09-2802:35:40【问题描述】：我有一个简单的引导网格布局。即使在小型设备上，我也不希望列垂直堆叠。<divclass="container"... 查看详情

删除和重新添加所有项目和所有列时，列表视图在 Win32 对话框上闪烁

】删除和重新添加所有项目和所有列时，列表视图在Win32对话框上闪烁【英文标题】：ListviewflickersonWin32dialogwhenremovingandre-addingallitemsandallcolumns【发布时间】：2010-06-3014:16:02【问题描述】：考虑一个普通的Win32对话框，其中包含用... 查看详情

bootstrap-table 在移动视图中隐藏列

...1-0714:43:23【问题描述】：我有一个复选框列，它应该只在桌面上可见，而不是在移动设备或标签上。文档中没有可用的选项来隐藏/显示基于设计的任何列。我们可以这样做吗？【问题讨论】：【参考方案1】：现在（4.2）按照此... 查看详情

java示例代码_在JavaFX2表格视图中禁用列重新排序

java示例代码_在JavaFX2表格视图中禁用列重新排序 查看详情

导航悬停在桌面，点击移动

】导航悬停在桌面，点击移动【英文标题】：Navhoverondesktop,clickonmobile【发布时间】：2015-10-0816:14:14【问题描述】：我有一个JSFiddlehere。这是一个带有下拉菜单的引导导航。我没有使用引导下拉菜单，而是我自己的。下拉菜单需... 查看详情

引导程序上的移动视图在容器底部有额外的空白空间

】引导程序上的移动视图在容器底部有额外的空白空间【英文标题】：mobileviewonbootstraphasextrawhitespaceatthebottomofcontainer【发布时间】：2022-01-1221:31:39【问题描述】：whitespaceonmobile页面顶部有烦人的空白，我想弄清楚如何在移动设... 查看详情

重新排列移动设备的容器

...【发布时间】：2017-12-2400:23:38【问题描述】：我想让我的桌面友好网站也适合移动设备。This是它在移动设备上的样子。This是我希望它寻找移动用户的方式。这种布局背后的原因是它在桌面上看起来不错，每行有2列。HTML代码：&l... 查看详情

引导数据切换在移动设备上不起作用

...发布时间】：2018-05-2414:43:06【问题描述】：我正在尝试在桌面浏览器上运行时完成与代码示例类似的数据切换。这段代码的问题是它不能在移动设备上运行。例如：三星（s6、s7）和苹果（Iphone6s和7s）<divclass="row"><divclass="f... 查看详情

链接和按钮在引导网格中的小屏幕和超小屏幕上不起作用

...发布时间】：2017-02-1216:28:00【问题描述】：我创建了一个视图，它在中型和大屏幕上显示2列，但在小屏幕和超小屏幕上仅显示1列。我正在使用引导程序中的推拉类来重新排列不同屏幕尺寸的面板。我的问题是，在小屏幕和超小... 查看详情

移动设备和台式机上的引导卡大小不同

...nddesktop【发布时间】：2021-04-2606:24:32【问题描述】：我的桌面上有引导卡(bootstrap4)，如下所示：我的手机视图是这样的：我的html代码是：<divclass="card-deck"><divclass="centercard"style="width:100%; 查看详情

如何在两个引导列之间放置一个图标？

...是col-6并且不能更改。我希望此图标始终位于移动设备和桌面设备等的两列之间。我该如何实现？<aclass="rowbg-light"href="#"><divc 查看详情