程序员经验分享-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 网格系统布局不起作用 的相关文章

  • 具有 ItemsControl 嵌入网格的 SharedGridSize 组

    我正在尝试使用以下方法将多个网格嵌入到另一个网格中ItemsControl并使所有子网格共享相同的行高

  • 确定 WPF 元素相对于某个父元素的边界矩形

    我认为这是一个非常简单的请求 但我似乎无法在搜索中找到确凿的答案 如何确定窗口中特定视觉元素相对于其他父元素的边界 我尝试过使用LayoutInformation GetLayoutSlot但这似乎只是返回一个Rect在 0 0 处并且不反

  • Java垂直布局？

    我需要将 JLabel 垂直放置在一些 JButton 上 就像游戏菜单一样 它们都应该居中 我已经下载了 MigLayout 但我不知道如何使用它 所以我只是想要一种方法来垂直和居中定位我的组件 无论 MigLayout 与否 另外 我不

  • Kamada 和 Kawai 图形布局算法？ [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 有人尝试过 Kamada Kawai 的 88 算法来绘制一般无向图吗 如果是这样 并且您知道其中的任

  • 将抽屉布局添加到主要活动中

    我创建了一个应用程序 它工作得很好 但现在我想在主活动中包含导航抽屉 我知道代码模板 但为此我需要创建新活动 我的问题是如何将抽屉布局包含到现有活动中仅包含 Recycler 视图和 fab 按钮 是否可以包含 抱歉这个大问题 您可以按照以

  • Android：焦点时改变样式

    我有这个自定义布局 LinearLayout FrameLayout ImageView TextView 此布局对点击事件做出反应 使用LinearLayout setOnClickListener 并使用可聚焦android focus

  • 如何隐藏组件而不卸载它？

    我有一个列表组件 我希望在不需要时将其保留在 DOM 中 以便滚动位置不会丢失 我尝试将样式设置为 display none 但这会卸载该组件 我也尝试过设置 flex 0 0001 哪种有效 但感觉像是一种黑客攻击 他们稍后可能会优化为

  • 如何在android listview或线性布局中动态设置marginBottom？

    friends 我想使用java代码或动态设置layout marginBottom 在列表视图或线性布局中 有人指导我如何实现这一目标吗 任何帮助 将不胜感激 ListView lst getListView LinearLayout L

  • 我应该使用 和 吗？如果是，为什么以及如何使用？

    我一直在尝试正确使用 colgroup 和 col 标签 但我不明白 我阅读了规范和所有内容 但我不明白其目的或如何实现它 A colgroup用于table元素来帮助理解具有不规则标题的表中复杂的信息层次结构 WAI 有一个关于如何处理此

  • 使用 jQuery Mobile 和响应式布局/CSS 媒体查询是否多余？

    我正在退房http mediaqueri es http mediaqueri es 今天发现这些网站非常适合移动设备 所以我想知道将 jQuery Mobile 和响应 自适应布局与媒体查询一起使用是否是多余的 因为仅使用媒体查询似乎是一

  • android:widgetLayout 和 android:layout 之间的区别？

    我得到一些奇怪的配置 其中 widgetLayout 配置列表项的内部空间 而布局配置整个项目列表和屏幕背景 有人能真正解释一下什么是 widgetLayout 吗 android layout 整个首选项的布局 包括标题 摘要和小部件 a

  • 我可以为 Android Activity 分配“默认”OnClickListener() 吗？

    我有一个 Activity 对于布局中的每个小部件 我调用 setOnClickListener 来分配我的 OnClick 处理程序 在我的 OnClick 处理程序中 我使用 switch 语句根据 View 参数的 ID 为每个按钮执

  • 如何将图像放在 UIButton 中文本的右侧？

    如果可以避免的话 我不想使用子视图 我想要一个UIButton其中包含背景图像 文本和图像 现在 当我这样做时 图像位于文本的左侧 背景图像 文本和图像都有不同的高亮状态 最简单的解决方案 iOS 10 及更高版本 Swift button

  • 如何使用CSS将文本放在“框”的右上角或右下角

    我怎样才能得到here and and here位于右侧 与 lorem ipsums 位于同一行 请参阅以下内容 Lorem Ipsum etc here blah blah blah blah lorem ipsums and here

  • 中心引导表宽度为 100%？

    table class table table striped table hover table responsive table

  • 底部页脚的 css 布局，动态 ajax 内容更改页面高度

    Update 实际上 我现在通过放弃固定页脚设计来解决这个问题 动态内容移动页脚并适当调整容器大小似乎没有问题 除非页脚最初固定在浏览器底部 我希望其他人最终能够提供一个兼具两全其美的出色解决方案 I spent all day tryin

  • 网格布局：创建 CSS，以便元素在调整相邻元素大小时保持位置

    我想在网格布局中构建一个简单的图像库 并且我正在使用类似的东西悬停时缩放 http www javascript fx com navigation imagezoom general help help html缩放悬停图像 但我宁愿使用

  • 将 JLabel 置于 JPanel 的中心

    我正在使用 NetBeans GUI 构建器来处理我的布局 我对 LayoutManager 很糟糕 并尝试放置一个简单的 JLabel 以便它始终在其父 JPanel 内居中 水平 理想情况下 即使调整了 JPanel 的大小 这也将保持

  • 为什么网格项目不居中？

    由于某种原因 两个输入范围使网格中的前两项偏离中心 我假设这是因为它们的影子 DOM 样式 事实真的是这样吗 有谁知道为什么范围使项目 A 和 B 偏离中心 这是一个代码笔 https codepen io tOkyO1 pen QOeKL

  • minHeight 有什么作用吗？

    在附图中 我希望按钮列与图像的高度相匹配 但我也希望按钮列有一个最小高度 它正确匹配图像的高度 但不遵守 minHeight 并且会使按钮向下滑动 我正在为按钮列设置这些属性

随机推荐

  • 如何将 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 列 但它不起作用 我是引导新手 这是代码

热门标签