bootstrap如何像图像一样重新排列网格？

Bootstrap 是一个流行的前端框架，它使用基于栅格系统的布局来帮助开发者创建响应式网页设计。栅格系统允许你将页面分成多个列，这些列可以根据屏幕大小动态调整其宽度。

基础概念

Bootstrap 的栅格系统基于 12 列布局，这意味着一行可以被分为最多 12 个等宽的列。你可以根据需要组合这些列来创建不同的布局。

如何像图像一样重新排列网格

如果你想要像图像一样重新排列网格，你可以使用 Bootstrap 提供的预定义类来控制列的顺序和对齐方式。以下是一些关键的类：

col-*：定义列的宽度。
order-*：改变列的显示顺序。
float-*：浮动列到左侧或右侧。
align-items-* 和 justify-content-*：控制行内元素的垂直和水平对齐。

示例代码

以下是一个简单的示例，展示了如何使用 Bootstrap 的栅格系统来重新排列网格：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Grid Example</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-md-4 bg-primary text-white text-center">Column 1</div>
    <div class="col-md-4 bg-secondary text-white text-center order-md-1">Column 2</div>
    <div class="col-md-4 bg-info text-white text-center">Column 3</div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

在这个例子中，order-md-1 类使得通常在中等屏幕大小下第二个出现的 Column 2 在小屏幕上会先于其他列显示。

应用场景

这种网格排列方式非常适合需要根据不同屏幕尺寸调整布局的响应式设计。例如，你可能希望在移动设备上将某些内容放在顶部，而在桌面视图中将其放在侧边。

遇到的问题及解决方法

如果你遇到了栅格系统不按预期工作的情况，可能是因为以下原因：

列的总和不等于12：确保同一行中的所有列的宽度之和为12。
混合使用了不同版本的Bootstrap类：确保你的HTML中引用的Bootstrap版本一致，并且使用的类与该版本兼容。
CSS冲突：检查是否有其他CSS样式影响了Bootstrap的默认样式。

解决这些问题的方法包括：

调整列的宽度，确保它们的总和为12。
更新或移除可能导致冲突的外部CSS文件。
使用浏览器的开发者工具来检查和调试CSS样式。

通过以上方法，你可以有效地使用Bootstrap的栅格系统来创建灵活且响应式的网页布局。

bootstrap如何像图像一样重新排列网格？

、、、

当浏览器尺寸小于lg断点时，我想让它像上图那样工作。 ? 但是当我尝试的时候，它变成了这个样子。我从我的知识中得不到任何感觉。请给我建议。

浏览 38提问于2021-02-12得票数 0

回答已采纳

1回答

JQuery可排序+拖放上载

、、

基本布局是使用jQuery可排序的图像/对象的网格。我可以按我想要的任何顺序重新排列图像，通过拖动它们。同时，我可以通过拖放包含网格的div上的任何位置从我的文件系统上传新的图像，并且图像在完成上传后会出现在网格上的第一个位置。现在，我希望用户能够将文件拖到网格中的任何位置，然后将上传的图像显示在网格上的特定位置(同时相应地重新排列其他图像)。我还没有找

浏览 0提问于2014-07-10得票数 1

2回答

我有一个bootstrap网格设置，在网格的一个单元格中，有一个宽度为250px的div漂浮在右边；当然，单元格中的文本遵循浮动的div轮廓并环绕它；有时我会在文本中添加一些应该填充单元格的图像(100%宽度，像bootstrap一样响应img的类)。如果图像位于浮动div的一侧，我如何让它停在浮动div上？在我的设置中，图像正确地填充宽度，如果浮动不存在(或者图像从它下面开始)，它是正确的，但如果

浏览 0提问于2014-02-05得票数 0

1回答

引导3覆盖标题未正确对齐

、、

我已经在bootstrap中创建了pintrest样式的网格，并希望在右上角和底部显示覆盖标题文本。还想根据图像来拟合网格，现在它在图像宽度之后给出一些额外的宽度。那么我在这里应该调整什么css属性呢？

浏览 3提问于2015-11-03得票数 0

回答已采纳

1回答

居中的砖石网格中的图像不会随着浏览器的调整而缩放。

、、、、

我使用砖石在我的网页上的网格视图中显示图像。为了对网格容器进行中心设置，我遵循了砖石文档并设置了以下内容：和.grid { margin:但是，我发现当isFitWidth设置为true时，网格中的图像保持不变为380 re(图像的实际大小)，并且在浏览器重新调整大小时不会缩小到该大小以下。如何使网格容器以中心为中心，并允许<e

浏览 1提问于2015-07-05得票数 2

回答已采纳

2回答

大型垂直柱推倒其他网格单元

、

我正在使用Bootstrap来构建一个仪表板，但是我对Bootstrap相当陌生，在下面的图像中，我在获取最终的网格布局时遇到了问题。问题是，当我添加第4列(表)时，它将垂直容纳比左边的其他3列(小部件)更多的数据，它正在向下推下下面的行内容(图表)，就像在这个图像中一样。为什么我的图表会像这样被推倒，我怎么才能修好它？

浏览 2提问于2015-10-03得票数 0

回答已采纳

1回答

带有延迟加载的Masonry jquery插件

、、

当使用带有延迟大小的masonry时，延迟加载图像，这意味着它会动态地将它们添加到网格中，所有添加的不在视口中的图像都不能像它们应该的那样适合网格。它们堆叠在一起。所以我给lazyload添加了一个类： opacity: 0;但这并不能解决问题，因为图像有不同的高度，它们重叠或有太多的空白当我调整整个窗口的大小时，即使只是1px，图像也会完美地重新排列。我也试过使用i

浏览 12提问于2018-07-24得票数 1

1回答

仅基于嵌入式Bootstrap 3的网格系统

、、、

我有一个现有的网站，我需要添加一个基于网格的布局，只在主内容区域，而不是在导航栏或页脚部分。我遇到的问题是，当我使用bootstrap 3定制工具，取消选择除网格系统选项之外的所有内容，然后添加生成的bootstrap.css文件，它会改变我的页面排版，元素大小等，并使页面的整个布局变得混乱。有没有人有什么建议，如何将像Bootstrap 3的网格系统这样的网格系统嵌入到我的页面中，并强制它只在添加了" grid“类的div

浏览 1提问于2016-03-28得票数 1

1回答

旋转三维网格Lua

、、

我想知道如何旋转一个90度的三维网格，或者更确切地说，一个2D网格一层一层地旋转。

浏览 1提问于2018-06-23得票数 1

1回答

Oracle APEX更改交互式网格中的默认列顺序

、

更改交互式网格默认列顺序有问题。我的APEX版本19.2我做错了还是有个窃听器？

浏览 3提问于2020-04-13得票数 0

回答已采纳

1回答

图像的缩略图网格

如何创建动态缩略图网格？这些空间是如何动态排列的？例如，添加和删除缩略图。

浏览 0提问于2011-02-17得票数 1

3回答

如何替换react-bootstrap中的容器类

、

我已经安装了react-bootstrap，并且已经证明我可以使用网格组件，这是我的主要需求。但是为什么找不到"Container“，我应该如何包装我最外层的内容，以便我的页面有页边距和通常由bootstrap设置的其他内容？

浏览 0提问于2017-07-02得票数 6

回答已采纳

1回答

无法将仪表板安装到TB模板上的容器中

、、

我正在尝试使用Twitter Bootstrap构建一个模板。就是一个活生生的例子。我遇到的问题是，我可以在dashboard菜单旁边定位sidebar div，我不知道我的错误在哪里？

浏览 0提问于2014-07-11得票数 0

回答已采纳

1回答

Bootstrap 4:移动设备中的列排序

、

我猜问题是从第二个ul底部的LORAE IPSUM上限开始的，但我不知道如何修复它。我已经尝试了几种解决方案，但我只是得到了更多的confused...Can有人帮我完成这个？我对bootstrap的使用还算新手，谢谢。

浏览 4提问于2017-07-18得票数 0

1回答

像Facebook一样的图像网格显示

、、、、

Facebook使用什么逻辑来显示时间轴上的图像网格，比如它取决于图像的数量或总图像的分辨率。我需要实现这样的东西，现在我正在基于图像的数量来实现它，我这样做对吗？

浏览 1提问于2015-12-25得票数 2

3回答

如何在android中以编程方式创建图库文件夹？

、、、、

首先显示sdcard文件夹的缩略图，然后，当我点击缩略图，然后，需要显示另一个新的页面来显示子图像。像whatzup图片上传和play商店的Gallery应用程序.. 请帮帮我，任何人都能走出这一步。当我从谷歌搜索时，只有像普通单曲图像一样的例子才能显示画廊视图的例子。

浏览 2提问于2014-08-04得票数 4

2回答

大容量图像上传和Rerrange功能

、、

我知道Wordpress默认允许您批量上传图像，所以我假设解决方案将使用该功能。但据我所知，它不允许你调整他们的顺序，他们是依附在岗位上。我之所以能够选择重新排列大量上传的图像，是因为在前端，图像显示得有点像一幅镶嵌图，其中多幅图像以网格的形式组成一幅较大的图像。用户创建一个新的帖子。然后，用户单击一个按钮，该按钮显示媒体上传器，并允许他们同时上传大量图像。图像被处理，然后与post相关联。然后，用户可以<

浏览 0提问于2011-08-10得票数 0

回答已采纳

1回答