程序员经验分享-hwhale

Bootstrap 4.0 网格系统布局不起作用

2023-12-01

我正在尝试使用引导程序进行布局，但我无法弄清楚我做错了什么。我放入两列 6 列，第二列 6 列，我放入两列 3 列，但它不起作用。我是引导新手。

这是代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
	<style type="text/css">
	</style>
</head>
<body>
<div class="container-fluid">
	<div class="container">
		<div class="row">
			<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
			<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
			<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
			<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
			<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
			<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
			<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
			<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
			<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
			<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
			<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-left: solid 1px #ffbfbf;">a</div>
			<div class="col-1 col-sm-1 col-md-1 col-xl-1" style="border-right: solid 1px #ffbfbf;border-left: solid 1px #ffbfbf;">a</div>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="border-left: solid 1px #ffbfbf;"><div style="height: 700px; background-color: #FF3355; border-radius: 15px;">a a a a a a</div></div>
			<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="border-left: solid 1px #ffbfbf;">
				<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;"><div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div></div>
				<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;"><div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div></div>

				<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;"><div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div></div>
				<div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;"><div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div></div>
			</div>

		</div>
	</div>
</div>
335
</body>
</html>

我想做的事 ：

enter image description here

我得到什么：

enter image description here


您只是缺少基本的引导“规则”。来自docs..

在网格布局中，内容必须放置在列内，并且only列可能是行的直接子代.

In 引导程序4, .col-那是not放在.row 将垂直堆叠.

https://www.codeply.com/go/GlA3IP7oGU

<div class="row">
    <div class="col-12 col-sm-12 col-md-6 col-xl-6" style="border-left: solid 1px #ffbfbf;">
        <div style="height: 700px; background-color: #FF3355; border-radius: 15px;">a a a a a a</div>
    </div>
    <div class="col-12 col-sm-12 col-md-6 col-xl-6" style="border-left: solid 1px #ffbfbf;">
        <div class="row">
            <div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;">
                <div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div>
            </div>
            <div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;">
                <div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div>
            </div>

            <div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;">
                <div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div>
            </div>
            <div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;">
                <div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div>
            </div>
        </div>
    </div>
</div>

Read Bootstrap 嵌套的工作原理

有关的：将 bootstrap 列包装在额外的 div 中

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Layout

grid

row

Bootstrap4

col

Bootstrap 4.0 网格系统布局不起作用 的相关文章

  • 如何使用故事板更改wpf中网格行的高度

    我有一个Grid有 2 行

  • 提交Ajax表单后如何用消息更新_Layout.cshtml中的DIV？

    目前我有一把剃须刀View像这样 TotalPaymentsByMonthYear cshtml model MyApp Web ViewModels MyViewModel using Ajax BeginForm TotalPaymen

  • 如何使用 android:layout 属性实例化自定义首选项的布局

    我可以通过以下方式设置适当的布局以供偏好android layout属性 举个例子

  • Bootstrap 的网格每行列数

    Bootstrap 附带一个 12 列网格系统 必须放置在行内 我的问题是 列数 行数是否必须为 12 或更少 或者我可以有如下所示的布局吗 div class row div class col md 4 div div class co

  • Bootstrap Grid System 新线看起来不太好

    最近 我开始在我的网站上制作一个管理页面来编辑多个小表 1 5 个条目 它们全部显示在一页上 并且表格嵌套在 div 中 如下所示 div class row div class col xs 12 col sm 4 col md 4 di

  • Xamarin Forms：单击重新启动按钮时网格按钮 UI 中断

    我正在使用一个button在 的里面grid用于显示字母以实施Word search game 最初 用户界面看起来不错 但是当单击play again按钮 UI 中断 截屏 网格内设置按钮的代码 void SetGridLayout ch

  • 当鼠标悬停在上面时制作一个 React Bootstrap NavDropdown 下拉菜单

    我试图让 React Bootstrap 中的下拉菜单栏在您显示选项时hover超过它 我到处查看 所有解决方案似乎都已过时并且不起作用 如果您能够解决此问题 请告诉我 这是我尝试将更改应用到的下拉菜单

  • 如何在 Bootstrap 4 轮播中堆叠多个图像

    我不知道如何使用 Bootstrap 4 以及如何在一张幻灯片中显示多个小图像 例如缩略图 而不是让图像填充轮播的宽度 我已经使用下面的代码尝试了一些操作 但仍然无法堆叠很多图像 div class container h2 class t

  • 将 Kendo Grid 数据发布到 MVC 中的控制器

    我有两节课 包含另一个类的列表的一个 public string Name get set public string Surname get set public int Age get set public List

  • 如何在两种不同模式、两种布局中设置方向？

    我有一个叫做Main XML我将方向设置为纵向AndroidManifest xml 我也为 Honeycomb 设计了这个布局并将其放置在layout xlarge mdpi文件夹 但我想使用Main XML in layout xlar

  • 通过 Angular 4 进行的 Bootstrap 4 轮播的动态填充不显示图像

    我试图通过 ngFor 迭代包含图像 url 的字符串数组来动态填充 Bootstrap 4 轮播 轮播不显示图像 尽管查看生成的标记一切看起来都很好 我猜测该组件是在 Angular 添加每张幻灯片的 div 之前渲染的 因为 轮播幻灯片

  • 更改 Swing 组件的首选大小

    我有一个摆动组件 该组件的理想尺寸将因内容而异当前正在显示 在本例中恰好是图像 我希望在内容更改时更改此首选大小 并且还允许更改布局 例如 如果在 JScrollPane 内使用组件 则滚动范围将更改以适应组件的大小 在 Swing 中执行

  • 如何更改 bootstrap 版本 4 按钮颜色

    我可以通过更改 bootstrap v4 中的主题颜色来更改主按钮颜色 但它也会影响所有其他组件 如何设置主按钮颜色而不影响主题颜色 我不想设置品牌为主并实现它 还有其他选择吗 Bootstrap 4 1 2019 年更新 现在 Boots

  • Android：HTC EVO 3d 的布局问题

    首先我的问题是 HTC EVO 3d 支持哪种布局 我将构建通用应用程序 我已通过以下方式设置所有设备的布局 支持多屏 http developer android com guide practices screens support h

  • WPF 中的液体布局？

    Liquid布局在WPF中可行吗 当我们进行 Liquid 布局时 我们需要解决哪些顾虑 问题 Liquid 布局是否会调整文本字体大小 并且在图像变小和变大时也会调整图像宽度 是的 大多数容器 在 WPF 中称为面板 都支持液体布局 但使

  • CSS：DIV 中的文本被截断

    我正在致力于集成一个 jQuery 插件 该插件会隐藏页面的某些部分 直到用户单击 喜欢按钮 Facebook 小部件的部分文本被切断 我已经尝试过 CSS 但无法让它完全显示 如果容器的宽度设置正确 还有什么可能导致文本被截断 例子 ht

  • 设置 HTML 表格的最大显示行数

    具有动态生成的 HTML 表 行数未知 的 JSP 页面 在后端有属性 设置最大行数 例如 最大行数 15 如何将 HTML 表格的行数限制为max rows价值 表的其他部分应该可以通过垂直滚动访问 这意味着用户可以看到 15 行 如果向

  • Flutter 为什么环绕行时 Wrap 不起作用？

    我试图将一些内容包装在 flutter 中 但没有成功 我发现我无法像使用芯片或文本小部件那样换行 有人知道为什么吗 这是三组 Rows 每组都有一个图标和一个文本 并排放置 但在较小的屏幕中它会溢出 因为没有足够的空间 宽度 我希望当当前

  • 如何使用 dc.js 或 d3.js 为行图添加轴标签

    对于条形图和堆积图 我们可以使用 xAxisLabel X Axis Label and yAxisLabel Y Axis Label 为各个轴添加标签的函数 但 有没有办法为行图添加轴标签 尝试这样的事情 dc renderAll fu

  • 如何在android线性布局上获得阴影？ [复制]

    这个问题在这里已经有答案了 可能的重复 如何在android中为View设置阴影 https stackoverflow com questions 4406524 how to set shadow to a view in androi

随机推荐

  • 如何将 pdf 下载响应从 api (node/express) 传输到客户端 (react)？

    在我的具体设置中 我有一个生成 pdf 的后端服务器 然后当访问某个端点时 会触发 pdf 下载 但是 由于安全规则 我无法从前端访问该端点 因此我需要使用中间人服务器向后端发出请求 并将其转发到我的客户端 Code 前端 反应 const

  • 如何使用 CloudFormation 在 Redhat 中安装 aws-cfn-bootstrap/cfn-init 软件包？

    我正在尝试使用 CloudFormation 模板启动实例 实例已启动 但 UserData 部分未完全执行 因为cfn init aws cfn bootstrapRedhat 7 AMI 中未安装软件包 我尝试安装aws cfn boo

  • 消息、队列和 ESB - 我知道我想去哪里，但不知道如何到达那里

    长话短说 我正在开展一个项目 出于所有常见原因 我们正在重写一个大型 Web 应用程序 重写的主要目的是将在单个服务器上运行的大型单一应用程序分成许多较小的解耦应用程序 这些应用程序可以在许多服务器上运行 好的 这就是我想要的 我想HTTP

  • Qt 和高 dpi 屏幕

    我读过几篇关于此的文章 所以我有一台 Dell XPS 13 并将文本 应用程序和其他项目的大小更改为 200 但我想我的问题如下 当我通过 Qt Designer 启动应用程序时 一切看起来都很好 但是当我在设计器之外运 行应用程序时 意

  • 从 WPF 中的 Web 浏览器调用 HTML 页面中存在的 JavaScript 函数

    我是 WPF 新手 我在我的 wpf 应用程序中使用 WebBroswer 来渲染 Google 地图 我有一个 googlemap htm 页面 它包含一个初始化 lat log JavaScript 函数 现在我想使用 lat 和 lo

  • javascript 与数组的奇怪行为

    让我们考虑以下 JavaScript 片段 var arr function pushMe var temp name me arr push temp console log arr temp name you arr push temp

  • 根据 W3C XML 架构定义验证 XSD

    我正在生成一些 XML 模式 并希望确保我们的生成器正在创建有效的 XML 模式文档 不是 XML 我试图编写代码来验证 XML 模式文档 但失败了 我没想到会这么复杂 private void validateXsd String xsd

  • 静态内部类需要导入注释

    因此 我正在进行一些 jUnit 测试 并希望编写具有相似功能但足够小以在单个类中编写的不同类 无论设计决定如何 它都会给我带来编译器错误 我不确定我所看到的规则是什么 你可以想象它看起来像 package foo RunWith Suit

  • Realm - 模块文件是由旧版本的编译器创建的

    我使用最新版本的 xcode 和 swift 2 2 我的一个项目 由于错误 我已经好几个月没有打开了 现在还没有构建module file was created by an older version of compiler 我尝试了以

  • Mockito 单元测试 - 时间戳不同

    Mockito 测试存在一些问题 我目前收到此错误 Argument s are different Wanted repository save uk co withersoft docservice repositories hiber

  • 如何取消WCF服务调用？

    我有一个执行时间很长的WCF函数 所以我用backgraundworker在UI中调用该函数 我想提供一个取消执行的功能 所以我中止IComunicationObject 问题是服务执行没有停止 是在这种情况下有什么方法可以停止服务执行吗

  • 尽管 CloudWatch 代理正在运行，但 CloudWatch 日志组丢失

    我在 EC2 实例上看不到 Cloud Watch 代理定义的日志组 此外 默认日志组 var log messages 不可见 我在 root 帐户上也看不到这些日志 我配置了其他日志组并且可见 我有以下设置 亚马逊Linux 附加到实例

  • 我应该使用什么来为 heroku 上的 Rails 生成站点地图？

    作为 Rails 的初学者 我发现由于其只读限制 在 Heroku 上生成站点地图非常令人畏惧 然而 站点地图是我网站的基础 因为它的成功基于搜索引擎优化 我尝试过dynamic sitemaps gem 但很快就删除了它 因为我意识到它没

  • 使用 http:// 添加自定义 URL 架构

    我想向我的 iPhone 应用程序添加自定义 URL 以便其他应用程序能够打开它 不过 我希望 URL 以 http 开头 更详细地说 我想通过我发送给用户的电子邮件中的链接打开应用程序 并且如果从电子邮件中读取电子邮件 则该链接必须有效

  • OSX 10.8 登录项

    我找到了这个在 Package Maker 安装程序 postflight 脚本期间将应用程序添加到 OSX 登录项 但它似乎不适用于 OSX 10 8 这是来自另一个问题 适用于其他所有问题 defaults write Library

  • jquery 无限滑块 图片

    我正在尝试使用 jquery 创建一个无限滑块 我的页面有一些标签 其宽度等于窗口宽度 我想在 10 秒后滑动每张图像 当最后一张图像出现且第一张图像显示时 我希望它从右侧静止下来 现在我创建了一个宽度很大的 div 10000px 来保存

  • 双精度的精确二进制表示[重复]

    这个问题在这里已经有答案了 可能的重复 C 中的浮点数转换为二进制 我有一个非常小的双变量 当我打印它时 我得到 0 使用 C 现在为了获得更好的精度我尝试使用 cout precision 18 i think 18 is the max

  • WebView 中的 Android +1 按钮

    我尝试使用他们描述的方法将 Google 的 1 按钮放入 WebView 中 我已经初始化了 WebView 如下所示 final WebView web WebView findViewById R id webView web get

  • 可定制/动态 SWF 生成

    想知道是否有人知道如何制作可定制的 Flash swf 文件 其中似乎有一个 swf 模板 用户可以输入一些更改 例如文本或图像 并接收包含更改的新编译的 swf 文件 一些例子 http flashfreezer com landingc

  • Bootstrap 4.0 网格系统布局不起作用

    我正在尝试使用引导程序进行布局 但我无法弄清楚我做错了什么 我放入两列 6 列 第二列 6 列 我放入两列 3 列 但它不起作用 我是引导新手 这是代码

热门标签