如何在bootstrap网格中将4列分解为2列然后1列
在Bootstrap网格系统中，将4列分解为2列然后1列可以通过嵌套网格来实现。以下是具体的步骤和示例代码：
基础概念
Bootstrap网格系统基于12列布局，通过.container、.row和.col-*类来创建响应式布局。.col-*类中的*表示列的宽度，例如.col-4表示每行占4列。
相关优势
- 响应式设计：Bootstrap网格系统能够自动适应不同屏幕尺寸，确保布局在不同设备上都能良好显示。
- 灵活性：通过嵌套网格，可以轻松创建复杂的布局。
- 易用性：Bootstrap提供了丰富的预定义类，简化了布局的实现。
类型
- 固定宽度网格：适用于桌面端布局。
- 流式网格：适用于响应式设计，列宽会根据屏幕大小变化。
应用场景
适用于需要灵活布局的网页设计，如电商网站、博客、企业官网等。
示例代码
以下是一个将4列分解为2列然后1列的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Nested 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-6">
<div class="row">
<div class="col-md-6">
<div class="bg-primary text-white p-3">Column 1</div>
</div>
<div class="col-md-6">
<div class="bg-secondary text-white p-3">Column 2</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="bg-success text-white p-3">Column 3</div>
</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>解释
- 外层网格：
.container包裹整个布局，.row定义一行。 - 第一列：
.col-md-6表示在中等及以上屏幕上占6列（即一半宽度）。内部嵌套一个.row，包含两个.col-md-6，分别占3列（即一半宽度）。 - 第二列：
.col-md-6表示在中等及以上屏幕上占6列。
参考链接
通过这种方式，你可以灵活地在Bootstrap网格系统中创建复杂的布局。如果遇到问题，可以检查嵌套的.row和.col-*类是否正确使用，并确保没有超出12列的限制。
相关·内容
我正在尝试解决如何在Twitter bootstrap MEDIA网格元素中添加“captions”。下面是一个示例：
你会注意到“长”字幕使得网格看起来“错位”。有什么建议吗？
浏览 2提问于2012-01-20得票数 0
回答已采纳
我对Angular是个新手(实际上，我是个编程新手)。
我必须同时使用ng-grid和iu.bootstrap，我想知道是否可以在单个模块中调用它们。
我需要一个来自bootstrap的datepicker和来自ng-grid的网格。
我该怎么做呢？
谢谢
浏览 1提问于2014-04-16得票数 1
我想在wpf中使用c#代码旋转简单的网格，我的xaml代码是
<Window x:Class="rotate_test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/ble
浏览 1提问于2016-03-21得票数 1
回答已采纳
3回答
许多支持响应式技术的库使用12列网格系统。例如，默认的Bootstrap网格系统使用12列
使用12列系统而不使用其他系统背后有什么原因或逻辑吗？
浏览 1提问于2015-01-20得票数 1
我试图在ui网格中使用uib-bootstrap中的uib- popover，但当我单击弹出框时，" click“事件会转到我的网格中。我设置了一个柱塞来解决这个问题：https://next.plnkr.co/plunk/aFbYIYsKAD3puSt6 第一列(名称)是包含cellTemplate的列。如果你点击图标，一个弹出窗口就会出现，网格不允许你点击我放在那里的输入，只有当你点击标签的时候，但即便如此，它仍然有很多but。
浏览 25提问于2019-04-10得票数 0
回答已采纳
1回答
我在ui.bootstrap手风琴中使用ng网格有问题。看一看我的柱塞，看看这个问题正在起作用。
本质上，当在初始页面加载时关闭子手风琴组时，在手风琴内放置网格时，网格将被分配为零的宽度，并且不显示。
有人能为我指出解决这个问题的方向吗?要么通过调整CSS类，要么通过捕获手风琴组事件并重新呈现网格？我一直在和这个绕圈！
编辑:抱歉，柱塞现在公开！
浏览 2提问于2014-06-11得票数 1
回答已采纳
1回答
从用户定义的输入中生成输入矩阵
、、、、
我试图作出以下反应：
用户输入行和列
网格是在空白输入的反应中创建的，显示为具有正确尺寸的网格。
到目前为止，我有以下内容。在这里，为了简洁起见，我假设用户输入的行和列都是3：
import React from "react";
import "./App.css";
function App() {
// create a 3x3 matrix with some blank inputs as values values
const matrix = Array.apply(null, Array(9)).map(function
浏览 2提问于2020-08-22得票数 0
回答已采纳
我创建了一个需要由另一个程序调用的脚本，并将其转换为.exe文件，然而，即使file.py运行良好，.exe文件也总是崩溃，并显示以下消息：
"OSError: [WinError 126] cannot find specified module."
代码如下：
from pickle import load
from numpy import array
from sklearn import svm
X = array([[5,0,0.01525,0.02556]])
pickle_in = open('test_model','rb'
浏览 2提问于2020-07-31得票数 1
我有一个数据网格，我需要在其中实现两个功能，但我在如何实现它们方面遇到了一些障碍。
首先，我希望在网格的末尾添加一行，其中包含其他行的总和，并且我希望此行是固定的，这样当其他行被排序时，它就不会被排序。
其次，它是一个有很多列的网格，但它们可以分组到数据的不同方面，所以我想扩展和压缩一些列组，以便在屏幕上查看网格。我想做一些事情，比如在一组列上放置一个扩展器。
任何帮助都是最好的。耽误您时间，实在对不起!
浏览 0提问于2011-10-02得票数 0
如果我们在没有预处理器的情况下使用bootstrap，我们会将类添加到我们的开始标记中，如下所示：
<div id="El" class="col-md-1"></div>
我习惯于在sass中使用波旁纯净，在这种情况下，我可以在sass中的元素规则中导入混合。在这种情况下，我可以这样做：
#myEl
@import span-column(6)
看看这里关于bootstrap的较少的文档：，似乎没有适用于bootstrap网格系统的mixins。他们已经为供应商前缀、过渡、渐变和其他东西提供了方便的混合，但没有用于他们自己的
浏览 0提问于2014-10-28得票数 0
所以，到目前为止，我一直在使用BootstrapCDN加载程序，但是我想下载这些文件并在本地使用，而不依赖于我的互联网连接，但是样式不会加载。顺便说一下，我只需要网格。
我使用的是reactjs和material以及引导程序的网格->
我更改了样式表链接和脚本以指向我的文件，并相应地更改了jQuery和Popper.js标记。
CSS
从…
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"...
浏览 0提问于2019-01-30得票数 0
回答已采纳
例如，我想尽快加载jquery、bootstrap和handlebars javascript文件。bootstrap依赖于jquery，因此在jquery之后完成下载是有意义的。如何设置http2优先级才能实现此目标？
浏览 8提问于2015-12-14得票数 2
是否有可能在Bootstrap 2.3.x中使用Bootstrap 3中的甘油图标？
问题是，我有一个带有旧引导带的项目(2.3.2)。
由于使用网格系统对BS3进行了重大更新，所以我无法如此轻松地替换引导版本。这是一个很大的项目，要花很多时间来改变它。
实际上一切都很好。现在我的问题是，我习惯了使用BS3，我也喜欢在那里的糖图标，现在我想我可以在我的项目中使用它们。
有什么“简单”的方法吗？
浏览 0提问于2014-08-06得票数 0
回答已采纳
我使用角单页应用程序(SPA)模板启动了VisualStudioCommunity2017项目，如.NET网络开发和工具博客中所述：
双向数据绑定(ngModel)不起作用.
例如:在login.component.html中：
<input [(ngModel)]="x" name="x"/>
<h1>{{x}}</h1>
在login.component.ts中：
export class LoginComponent {
x = 5;
}
结果：
当我更改输入框中的值时，h1标记中的文本也会发生变化。但
浏览 3提问于2017-06-09得票数 1
我在Bootstrap网格中有一个Select输入和两个紧邻的文本字段，如下所示
<div class="form-group form-group-lg error_container dob_container">
<label for="field01" class="control-label column">Date of Birth</label>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12&#
浏览 0提问于2015-06-16得票数 0
2回答
谁能给我解释一下Bootstrap 4中的网格系统col，Bootstrap 4还是一个alpha版本吗？我应该开始在我的大项目中使用Bootstrap 4吗？它的未来更新会在我的项目中产生任何问题吗？
浏览 1提问于2018-06-11得票数 2
2回答
答:我必须在Sketchup中将纹理应用于我的网格，然后在导入后在Unity中重新应用它们。
我正在尝试将材质应用于Unity 5中的网格。在图像中，我将相同的材质应用于两个不同的网格。图像是木纹，并根据需要显示在右侧。在左侧，相同的材质显示为纯棕色。我想让它看起来和右边的材料一样。
网格是从Sketchup导入的。在许多情况下，在不同的网格上使用不同的纹理会发生这种情况。
我已经将网格分组，并将它们放在Sketchup的组件中，但这似乎不会影响结果。
即使在与用于纹理的图像的高/宽比大致匹配的简单形状上，也会出现此效果。
浏览 0提问于2015-11-21得票数 0
我已经使用960.gs (960网格系统)创建了photoshop模型。网站容器宽度为960px居中对齐。网站需要有响应性。
我应该怎么做，用Bootstrap 3将网站转换成HTMl？下载bootstrap之前需要自定义吗？
浏览 6提问于2014-06-18得票数 3
我使用的是jqGrid JS-v5.3.0。主网格使用的是styleUI:'bootstrap‘。子网格是通过实现subGridRowExpanded()创建的。在子网格中，除了单元格之间没有边框(子网格标签和内容/TDs)之外，一切都很好。无法通过读取文档找到配置。有一个“选择”的细胞边缘吗？谢谢。
(目前无法提供代码片段。在子网格中使用的配置是高度:100%，colname：.，colmodel：.，datatype：'local‘和data: mylocalvariable。无法测试禁用引导程序)
浏览 0提问于2018-04-13得票数 0
回答已采纳
我在asp.net中使用网格视图，我想在点击网格时获得元素，我该怎么做呢？一个网格有一个列id，名称，翘曲，纬度等，我想用Javascript选择所选的单元格数据，请让我知道。
请帮帮我。
关于Atif
浏览 0提问于2011-05-25得票数 3
回答已采纳
如何在网格中创建ScrollBar？
它是垂直滚动条。哪些可能的代码以及我应该将这些代码放在哪里，在form.int中还是在网格中。。。。？
浏览 0提问于2014-03-13得票数 0
1回答
我有一个具有6个属性的类，"CompletePosition"，"ActivityNumber"，"ActivityDescription"，"Duration"，"WeatherWindow“和"Critiria”，我试图在数据网格中显示它们。此时，我将数据网格的ItemsSource设置为IEnumerable。
你可能已经弄明白了，我的问题是"Critiria“只是显示为"(Collection)”。可以说，我希望它是扩展的，并且列表中的每个元素都显示在它自己的列中。这个是可能的吗？
浏览 0提问于2014-10-19得票数 0
2回答
对于Bootstrap的网格系统，我有一个很大的问题。我的问题是，由于连续只有12节，所以我的问题是自由空间：
正如你所看到的，这两列之间只有一个点的差异，但是由于网格系统中每个点的巨大努力，它们之间有一个自由的空间。
所以如果我们有一个大屏幕，那么自由空间就会大得多。我想要的是这样的东西:每一列只是包装它的内容和删除不必要的空间！由于我在整个项目中使用了Bootstrap的网格系统，所以我必须使用它，但我想要一个像wrap-content这样的特性。
如果一行可以超过12节，我们可以创建更精确的部件。
在图片中描述的这种情况下，如果我调整页面的大小，cols也可能相互重叠。我只是他
浏览 5提问于2015-08-12得票数 2
回答已采纳
我希望在16Xn网格显示中显示一个从128字节到512字节大小的十六进制数据(0x00到0xFF)的数组。它需要能够选择单个或一组元素并以某种方式突出显示数据。它还需要允许编辑。我用Winforms用C# 3,5写这篇文章。
我正在考虑某种富文本框或一组小文本框，但这两种想法都有其缺点。有没有一个像电子表格一样有意义的免费自定义控件，或者我将不得不使用自己的控件。任何想法都将不胜感激。
浏览 1提问于2008-10-13得票数 1
回答已采纳
1回答
我需要显示在网格或列表视图图像从URL，等于一个画廊从图片。
但是问题是图像大小，当我从样本中使用的时候，来自示例项目URL中的图像项目显示得很完美，但是当我更改不同大小的URL时，不会显示更多。
我不需要下载设备中的图像，只要显示(如果可能的话)。
如何获取图像并更改在列表或网格视图中ImageView中显示的图像的大小？
这个动作(重尺寸的50(+-)图像+显示在列表图像中)如何表现这一点？
Ps:我在Android平台上有相同的项目，并且表现得很完美。
我的主要问题是，因为我现在乞求iOS，比我需要任何职位，教程.这能帮我..。
谢谢!
浏览 0提问于2013-09-09得票数 0
回答已采纳
我正在尝试创建一个自定义网格结构。
该结构将由不同的行组成，每行可以有多列。每列将有1-2个表单域。
在Antd v4.2.0中，我们有帮助我们创建动态表单的<Form.List />组件。
我试过使用它，它可以用于动态行部分，但我不知道如何在<Form.List>中创建多个列，即<Form.List>
我也可以手动创建此网格，但我也希望在此网格中利用表单验证。
我正在尝试创建的视觉表示：
浏览 0提问于2020-05-06得票数 2
我想查看网格视图的RowDataBound事件中的数据表，并检查当前网格视图列中的值是否存在于数据表中。我只需要在RowDataBound事件中创建我的数据表，但这意味着对于网格视图的每一行，我都要往返于数据库并创建一个数据表。我宁愿先创建数据表，然后在我的RowDataBound事件中访问数据表。我知道如何使用页面上的标签或隐藏字段来实现这一点，但是如何在可从网格视图的RowDataBound事件中访问的页面上(或在变量中)存储数据表呢？我能以某种方式将数据表作为参数传递给RowDataBound函数吗？看起来我遗漏了一些非常简单的东西。
浏览 0提问于2011-12-02得票数 1
回答已采纳
我想在jqGrid中更改一组CSS项。说
当然，如果我们想要更改的不仅仅是一个组中的一个CSS项，而是两个或更多的CSS项，我们可以使用jQuery扩展来这样做：
var my_col_definition = {
icon_move : 'ui-icon-arrow-1',
icon_menu : "ui-icon-pencil"
}
$.extend( $.jgrid.styleUI.jQueryUI.colmenu , my_col_definition );
这部分起作用了。但是我想用下面的代码覆盖我的Bootstrap中的所有图
浏览 2提问于2018-11-02得票数 0
我正在学习如何使用Bootstrap。目前，我正在摸索布局。虽然Bootstrap很酷，但我看到的一切似乎都过时了。对于我的生活来说，我有一个我认为是我无法弄清楚的基本布局。我的布局如下所示：
---------------------------------------------------------------------------
| | | |
| | |
浏览 50提问于2013-10-08得票数 127
回答已采纳
1回答
我有一个现有的网站，我需要添加一个基于网格的布局，只在主内容区域，而不是在导航栏或页脚部分。我遇到的问题是，当我使用bootstrap 3定制工具，取消选择除网格系统选项之外的所有内容，然后添加生成的bootstrap.css文件，它会改变我的页面排版，元素大小等，并使页面的整个布局变得混乱。
有没有人有什么建议，如何将像Bootstrap 3的网格系统这样的网格系统嵌入到我的页面中，并强制它只在添加了" grid“类的div的子元素上工作(或一些类似的CSS选择器)。我感觉将整个Bootstrap3网格系统嵌入到我的页面中是没有必要的，它可以像定义一系列CSS类一样简单，比如.row
浏览 1提问于2016-03-28得票数 1
如果我使用ng引导，grid style不工作，但是当我使用引导(以style.css或angular.json style[]数组提供)网格样式时，它工作得很好，但是它覆盖了棱角材料的设计。
ng-bootstrap and bootstrap both I installed from npm
我用了<div class="col-md-6 md-offset-3"></div>
浏览 0提问于2019-07-31得票数 6
回答已采纳
我有帐户和客户地址实体之间的N:N关系，在帐户表单上，我有客户地址的子网格。单击子网格+按钮，将显示查找搜索。但我需要更改它以显示create form弹出窗口。我知道在这种情况下，我应该在帐户和自定义地址之间使用1:N关系，但在这一点上，我无法更改。我试着在ribbon上隐藏"add existing associated“按钮，但那是隐藏+按钮本身。我想要子网格+按钮，但想打开它的点击事件创建表单。任何帮助或指示都会非常有帮助。
浏览 4提问于2018-05-29得票数 1
2回答
我有一个引导页面，它现在只是一个旋转木马。我想集中我的网格，它是在一个引导旋转木马，但没有打破和响应。这有可能吗？
我的html结构：
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-w
浏览 13提问于2016-04-12得票数 0
回答已采纳
我想要动态绑定列表到一个数据网格，下面的代码第一次工作，如果再次单击添加，它不会在数据网格中得到填充。
private List<Item> PopulateItemList()
{
return itemLst;
}
private void btnAdd_Click(object sender, RoutedEventArgs e)
{
Item item = new Item();
item.Item1 = txtItem.Text;
itemLst.Add
浏览 0提问于2011-10-06得票数 3
回答已采纳
我一直在设计一个在Visual代码中使用网格和flexbox的站点，在那里一切都很好(视觉上的)。
现在，当我必须添加后端时，我不得不将我的代码传输到Asp.Net核心(v5.0)，并且由于某种原因，网格的填充太多了。CSS文件是相同的。下面是我的网格代码：
body {
margin: 0;
overflow-x: hidden;
background-image: url("../background.jpg");
}
.container {
width: 100vw;
height: 100vh;
display: gr
浏览 4提问于2022-05-31得票数 0
回答已采纳
我目前正在使用Twitter Bootstrap开发一个web应用程序。现在，我还需要为同一个应用程序使用jqgrid。所以，我在一个页面中包含了几个CSS。
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/flick/jquery-ui-1.8.19.custom.css" rel="stylesheet">
<link href="../css/ui.jqgrid.css" rel
浏览 0提问于2012-04-28得票数 0
回答已采纳
1回答
我想知道是否有人知道如何获得3D凹面形状的体积？Matlab内置函数只能计算凸形的体积。例如,
[K, V] = convhulln(shape.vertices);
V是音量。在这里，形状由具有顶点和面的网格定义。
非常感谢。
最佳，A
浏览 8提问于2013-01-10得票数 3
回答已采纳
1回答
如何使用Twitter Bootstrap在HTML中实现动态列表到网格的转换？因此，当您在列表和网格之间切换时，它看起来如下所示：
浏览 0提问于2016-08-19得票数 2
在我为Angular 2找到的示例中，每个应用程序可以创建一次组件：
(function(app) {
app.AppComponent =
ng.core.Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));
浏览 2提问于2016-02-10得票数 4
我尝试使用<div>来包装<Grid>中的元素，但我注意到这会破坏我的<Grid>！我在bootstrap网格系统中尝试了同样的事情，但这个问题没有发生。
问题是，我必须使用div来给Grid中的元素赋予一些样式，但是正如你在Codesandbox中看到的，Grid在使用div之后崩溃了，我该如何处理这个问题呢?我应该使用div的替代品吗?或者有没有一些Grid的道具可以修复这个问题？
浏览 0提问于2019-07-17得票数 0
我已经设计了一个Bootstrap 24 psd网格网站模板，但现在我对如何在Bootstrap 3或4中使用这个24或16 psd网格感到困惑，因为Bootstrap只提供12列网格系统。有没有人有合适的解决方案？
浏览 6提问于2018-06-27得票数 2
3回答
一排多跨推特启动
、、
使用Twitter的Bootstrap标准940‘m流体网格响应网格，我试图在一个.row中获得多个.rowdiv。
我想在页面的每一行显示最多3.span，所以随着页面的增加，它们只会被添加到.row中。
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="span4">1</span>
浏览 1提问于2012-02-28得票数 6
回答已采纳
1回答
Extjs 4网格悬停效果
、、、、
我正在使用extjs 4n rails。我有一个网格，有列作为文件名，这是超链接。我想在文件名的悬停效果上显示图像。图像以二进制格式保存在数据库中。现在我想在网格中显示文件名悬停效果的图像。
浏览 0提问于2011-08-18得票数 0
我计划在JMeter中将摘要头添加到我的“header”中。我计划使用在__digest中引用的函数。
一个例子是：
${__digest(MD5，${message}，，，)}
根据RFC3230的说法，我应该如何参考这个网格体呢？
浏览 3提问于2021-03-16得票数 0
回答已采纳
2回答
引导卡不下移
、、、、
我想找人帮忙处理我的自助卡。我有4张卡片，横贯整个页面的宽度。当在移动设备上访问网站时，它们仍然保持水平延伸，然后垂直延伸。我希望他们能站在另一个上面。我会感谢你的帮助。谢谢。
图片：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZ
浏览 0提问于2018-09-20得票数 1
回答已采纳
我没有得到列中的产品，我是通过使用bootstrap在单列中获得的。我如何在bootstrap中使用网格系统，这样我就可以在列中获得产品。
浏览 2提问于2018-07-19得票数 0
我正在使用Bootstrap网格，并且正在寻找一种快速/非侵入性的方式来使用网格在垂直方向显示一些元素。
例如，如果我通常会获得(即使用col md-3)：
A B C D
E F G H
I L M N
O P Q R
在我的版本中，我会“转置”版本：
A E I O
B F L P
C G M Q
D H N R
这只是服务器端的问题，还是有一种方法可以用网格CSS和/或javascript来实现？
S
浏览 1提问于2015-12-24得票数 0
我正在尝试使用CGridView小部件，并尝试找出在以下上下文中使用它是否合适:假设我有两个数据库表，Car和Accident。每辆车可能与零起或多起事故有关。我希望在网格视图中有一个列，其中包含每辆汽车的事故数量，假设网格视图中的一行表示一辆汽车。使用GridView小部件是否可行，或者我是否应该尝试其他方法？
浏览 1提问于2011-02-22得票数 1
1回答
如何在应用程序启动之前预编译这些文件，因为这在每个页面加载中都需要相当长的时间。
Compiled twitter/bootstrap/alert.js (0ms) (pid 26396)
Compiled twitter/bootstrap/tab.js (0ms) (pid 26396)
Compiled twitter/bootstrap/collapse.js (0ms) (pid 26396)
Compiled twitter/bootstrap/dropdown.js (0ms) (pid 26396)
Compiled twitter/bootstrap/moda
浏览 0提问于2013-02-19得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
