删除 Bootstrap 4 行列中的等高

2023-12-12

我目前正在尝试新版本引导程序,当使用更新的网格系统使用此代码分割两列时(JSFiddle):

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-4 hidden-xs-down">
    Some content on the left that's going to be smaller than right
  </div>
  <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
     A <br/>
     B <br/>
     C <br/>
     D <br/>
     E <br/>
     F <br/>
  </div>
</div>

每列都匹配高度,这对于我将要显示的内容来说是目前不需要的属性。

我对此进行了搜索,发现它不在 Bootstrap 3 中,现在被引入到 Bootstrap 4 中default.


在 Bootstrap 4 上有弹性盒实用程序,所以你可以添加.align-items-start to the .row:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row align-items-start">
  <div class="col-lg-4 col-md-4 col-sm-4 hidden-xs-down">
      Some content on the left that's going to be smaller than right
  </div>
  <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
     A <br/>
     B <br/>
     C <br/>
     D <br/>
     E <br/>
     F <br/>
  </div>
</div>

Bootstrap 使用 Flexbox 来格式化网格:

Bootstrap 的网格系统使用一系列容器、行和列来布局和对齐内容。它是用flexbox并且完全响应。下面是一个示例,深入介绍了网格如何组合在一起。
source: https://getbootstrap.com/docs/4.0/layout/grid/

因此,您可以使用 Flexbox 实用程序来更改网格的行为。

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

删除 Bootstrap 4 行列中的等高 的相关文章

  • 使用 bootstrap 将并排的网格位置交换到顶部和底部

    我有两个 div 内容和图像 它们在中等屏幕中并排放置 col md 6 内容 col md 4 图片 因此 当屏幕尺寸更改为小屏幕和 xs 屏幕时 这些 div 不应该并排放置 它们应该像这样顶部和底部对齐 image content 这
  • UIWebView 如何检测 被点击

    我知道下面的方法可以检测链接元素点击 但我想知道是否UIView可以检测是否img元素被点击 BOOL webView UIWebView webView shouldStartLoadWithRequest NSURLRequest re
  • CSS 中的 Data-URI SVG 背景在 Firefox 中不起作用

    好的 这就是我想做的 我的 css 文件中有这段代码 form row textfield hover textfield m hover background image url data image svg xml base64 PHN
  • CSS 聚焦于出现的输入 div [重复]

    这个问题在这里已经有答案了 我有这样的代码 div class lighter div
  • 鼠标移动时画布拖动

    我正在尝试构建一个可以使用鼠标移动拖动的画布 我做了一些我无法理解的错误 因为一开始似乎有效 然后出现了一个增量错误 使画布移动得太快 考虑以下代码 window onload function var canvas document ge
  • 指定 HTML5 输入类型 = 日期的值输出?

    我想将本机日期选择器添加到我的应用程序中 该应用程序当前使用遗留的本地系统 日期输入支持尚未广泛普及 但如果我可以基于兼容性提供这两种实现 那就太理想了 有没有办法指定 HTML 日期选择器给出的值的输出 歌剧的默认设置是yyyy mm d
  • 在已标记的输入元素上使用“aria-labelledby”的目的是什么?

    许多 ARIA 演示网站使用以下代码
  • 如何使用 github 托管外部 CSS 文件?

    我将 css 上传到 github 然后转到网站上的文件并单击 raw 选项 我尝试将其添加到网页中 但 chrome 给出以下错误 资源解释为样式表 但使用 MIME 类型 text plain 进行传输 https raw github
  • 如何使用 HTML 和 CSS 在我的网站上显示社交图标?

    我拼命尝试向我的网站添加一些图标 但无法让它们正确显示 我想要的只是一个包含图像并在线显示它们的容器 然后我想在该容器和图像之间添加一些填充 仅此而已 看这里我的方法 如果有人可以帮助我并纠正我的代码 使其真正有效 我会非常高兴 在我的 H
  • Bootstrap Grid System 新线看起来不太好

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

    我如何在 CSS 中设计带有叠加层的背景图像 就像这个示例图像一样 这是代码 我想添加tour类到背景图像和叠加效果 div class tour div class container div class row div class co
  • iPhone 上的锁定方向 UIWebView

    有没有办法锁定 UIWebView 的方向 使用 Obj C JS 还是 Html 我不想有按钮或任何东西 我只想在应用程序打开时将其锁定为纵向 好像这个堆栈溢出帖子 https stackoverflow com questions 43
  • 仅使用 HTML 和 CSS 制作弧形帆形状?

    是否可以仅使用 HTML 和 CSS 创建下面的弧形帆形状 我可以看到从这个答案 https stackoverflow com questions 7073484 how does this css triangle shape work
  • 为什么我无法对自定义属性(又名 CSS 变量)进行动画处理?

    看这个动画 金色 div 有一个自定义属性动画的动画 keyframes roll o 1动画 o 这是分步动画的 银色 div 有一个动画 其中normal属性是动画的 keyframes roll o 2动画left 这会持续动画 为什
  • 当 Chrome 中嵌套滚动中的数据更改时防止页面滚动

    我在页面中有一个固定大小的元素 带有 溢出 滚动 其内容经常更改 我预计该元素内部发生的更改会影响该元素的滚动 但不会影响页面滚动 但是当这个元素位于页面顶部时 页面本身开始滚动 我怎样才能防止这种情况发生 要重现此行为 我在 chrome
  • 即使我的情况按预期发生变化,Angular ngClass 也不会更新我的课程

    我正在创建的模板中有类似的内容 div class nng 3 div 价值app layout isNavbarFixed等用零或一初始化 并且页面第一次加载时 适当的类被插入到我的div 不过 此后通
  • 如果超过高度则动态浮动柱

    I ve got a questing concerning a dynamic floating layout of li s in a ul Container 灰色容器 ul 固定高度为 150px 所有 li 其中的应使用最大高度
  • 粘性背景图像/使用 CSS

    我目前正在创建我的第一个网站 并且即将完成 我在标题下为主体使用背景图像 我发现每个页面都有一个问题 因为它们的高度都不同 这使得我背景图像的当前设置放大图片以适合整个页面 我想做的是将背景图像设置为 粘性 我的想法是 背景图像将直接位于标
  • 如何计算一行中Flexbox项目的数量?

    网格是使用 CSS flexbox 实现的 Example http jsbin com jumosicasi edit html css js output 本示例中的行数为 4 因为我出于演示目的固定了容器宽度 但是 实际上 它可以根据
  • 在引导程序中以编程方式更改选项卡窗格选项卡

    我使用的选项卡窗格定义为 ul class nav nav tabs li a href personal Personal Information a li li class active a href contact Contact a

随机推荐

  • 如何发出多个请求并等待数据来自Retrofit 2.0中的所有请求 - android

    当前代码 Retrofit retrofit new Retrofit Builder baseUrl Constant BASEURL addConverterFactory GsonConverterFactory create bui
  • 在 JavaScript 中获取工作日的下一个日期

    如何才能返回下一个date给定工作日的日期 可以是数字 0 6 或名称 Sunday Saturday 例如 如果今天 在2009 年 10 月 16 日星期五我通过了 Friday 它将返回今天的日期2009 年 10 月 16 日 Sa
  • 删除 Mongo 集合不会清理磁盘空间

    我有一个包含 750 000 个文档的集合 它占用了大约 7Gb 的磁盘空间 我已经删除了该集合 但是文件 test 0 test 11 仍然在磁盘上 如果我删除它们 那么我会丢失所有集合 而不仅仅是我删除的集合 Mongo 不应该删除它们
  • 为什么Java 6重写SortedMap中的keySet()、entrySet()和values()接口

    Java 5 http docs oracle com javase 1 5 0 docs api java util SortedMap html Java 6 https docs oracle com javase 6 docs ap
  • iOS 如何检测用户是否使用 home+power 进行了截图?

    我正在尝试检测用户是否截取屏幕截图 以警告他们这是一个受版权保护的视频 我尝试过达尔文通知 但它不起作用 NSMetadataQuery 可能是一个解决方案 但我们希望该应用程序也能在 iOS4 上运行 有人可以帮助我吗 谢谢 p 无法检测
  • SignalR 连接无法启动到 IIS 托管的应用程序

    我制作了一个应用程序 并尝试通过 SignalR 连接到后端 ASP NET Core 3 1 后端托管在 IIS 中 以便于开发 在客户端上调用 StartAsync 方法成功协商 但随后在 GET 上永远挂起 GET http loca
  • 使用 Jackson 忽略字段而不修改 POJO 类

    我的 POJO 类有 JsonIgnore在字段的声明上 而不是在 getter 和 setter 方法上 这是一个生成的文件 我无法对其进行太多更改 如何在使用时忽略该字段JsonGenerator Setting Using JsonI
  • 所有 tkinter 函数在程序启动时运行

    我在使用 tkinter 时遇到了一个以前从未遇到过的非常奇怪的问题 在任何地方为小部件 例如按钮或菜单项 设置命令时 该命令都会在应用程序启动时运行 基本上 该命令不会等到单击小部件才运行 在我的代码中 我知道我没有打包按钮 这是为了表明
  • 有没有更好的方法来迭代行(30000)的嵌套循环?

    我想在下表中找到包含重复电子邮件地址的行 当电子邮件地址重复时 我在以下代码的数据框中创建一个额外的列 其值为 ja 这对于少量行 150 来说很好 对于大量行 30000 脚本会挂起 有更好的方法来循环行吗 import pandas a
  • Scrapy:是否可以暂停Scrapy并在x分钟后恢复?

    我正在尝试抓取一个大型网站 他们有一个速率限制系统 scrapy是否可以在遇到403页面时暂停10分钟 我知道我可以设置一个 DOWNLOAD DELAY 但我注意到我可以通过设置一个小的 DOWNLOAD DELAY 来更快地抓取 然后在
  • Swift,从字符串中获取变量名称

    我有个问题 我知道这可以在 Ruby 中完成 不确定 Swift 是否可以 但从未做过类似的事情 我正在开发的程序的工作原理与此类似 如果用户在 TextView 中写入 a b 我的代码应该详细说明变量 a 和 b 之间的总和值 我的意思
  • 如何在postgres中根据IF条件删除表?

    我试图根据条件在启动时删除表 IF NOT EXISTS select from pg class where relname mytable and relpersistence u DROP TABLE IF EXISTS mytabl
  • 什么时候使用嵌套 Java 类真正有用?

    你能给我一个嵌套java类有用的具体例子吗 我正在研究它 我了解它是如何工作的 但我无法想象真正需要使用它的真实情况 太感谢了 Marco 关于何时使用嵌套类的最简洁的总结是 当该类在逻辑上是外部类 API 的一部分时 或者当它封装特定于外
  • 如何选择 ID 中包含特殊字符的元素?

    我有一个带有网格的页面 其中包含很多如果使用 奇怪的名称 输入来模拟数组
  • 如何知道 Flutter 中的 Nested Widget 内部发生了 pop 事件

    我目前正在构建应用程序 我需要使用嵌套路由来保持一个屏幕相同并在不同的屏幕上进行路由 我想当第二条路线弹出时 以便我可以更改扩展的值以填充整个屏幕 Github 中的要点 这是代码示例 import package flutter mate
  • R:如何从数据框中提取列表?

    考虑这个简单的例子 gt weird df lt data frame col1 c hello world again col weird list list 12 23 list 23 24 NA gt gt weird df A ti
  • 污染玫瑰图网格

    我正在尝试创建一个污染玫瑰图 如链接中所述绘制 Windrose 制作浓度设置为颜色的污染玫瑰 回复中的示例有效 但是当我使用我的数据时 它给出了一个奇怪的图 有什么建议我哪里出错了吗 谢谢 import matplotlib pyplot
  • 使用带有子域的邮递员时出现“无法得到任何响应”响应

    我正在使用邮递员来测试我拥有的 API 当请求不包含子域时一切都很好 但是当我向 URL 添加子域时我收到此响应 无法得到任何回应 连接时出错http 子域名 localhost 端口 api 为什么会发生这种情况 服务器无法发送响应 确保
  • Sql 查询中的新行

    如何在 Sql 查询中获取新行或换行符 Pinal Dave 在他的博客中对此做了很好的解释 http blog sqlauthority com 2009 07 01 sql server difference Between line
  • 删除 Bootstrap 4 行列中的等高

    我目前正在尝试新版本引导程序 当使用更新的网格系统使用此代码分割两列时 JSFiddle div class row div class col lg 4 col md 4 col sm 4 hidden xs down Some cont