如何在bootstrap中使用垂直对齐

2024-05-01

简单的问题:如何使用 bootstrap 在一个列内垂直对齐一个列?这里的例子(我想垂直对齐child1a和child1b):

http://bootply.com/73666 http://bootply.com/73666

HTML

<div class="col-lg-12">

  <div class="col-lg-6 col-md-6 col-12 child1">
    <div class="col-12 child1a">Child content 1a</div>
    <div class="col-12 child1b">Child content 1b</div>

  </div>


  <div class="col-lg-6 col-md-6 col-12 child2">
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>

  </div>

</div>

UPDATE

一些CSS:

.col-lg-12{
top:40px;
bottom:0px;
border:4px solid green;


}

  .child1a, .child1b{
  border:4px solid black;
  display:inline-block !important;
}

.child1{
  border:4px solid blue;
  height:300px;
  display:table-cell !important;
  vertical-align:middle;
}

.child2{
  border:4px solid red;
}

.parent {
    display: table;
    table-layout: fixed;
}

.child {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

table-layout: fixed防止破坏 col-* 类的功能。

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

如何在bootstrap中使用垂直对齐 的相关文章

  • 增加数字输入、CSS、HTML 上的向下和向上箭头的大小

    有没有办法利用CSS来增大数字输入框右侧的上下箭头的大小 只是向上和向下箭头 而不是整个输入框 或者至少是按比例的 看这个例子 size 36 font size 36px size 12 font size 12px
  • 动态表单标签宽度的 CSS

    我目前正在重构我们的表单控制器之一 以便我们可以将其用于面向公众的网站 目前它正在为表单生成表格布局 但我正在尝试使用 CSS 表单来完成它 我正在尝试重现看起来像这样的东西http www stylephreak com uploads
  • div 边框上的内边距

    我想在 css 边框上添加填充 将其拉入 div 内 远离边缘 使用 css 可以吗 css3 很好 webkit 这是设计 我通过将一个 div 放在一个 div 中 然后给内部 div 一个边框来做到这一点 我想让标记尽可能精简 所以如
  • 如何倾斜 div 并保持背景图像不倾斜

    我已经花了几个小时了 所以希望有人能提供帮助 我有一个网站 其中大部分 div 都是倾斜的 大多数 div 都包含背景图像 现在我已经让 div 倾斜了 内容完美地位于其中 唯一的问题是背景图像 它与父级一起倾斜 我用谷歌搜索了很多 但找不
  • 为什么需要重置浏览器?

    好吧 我知道这可能不是最好的标题why我们需要重置浏览器 因为浏览器有不同的默认设置 我的问题太长 无法放入标题中 如果每个人 90 的时间都需要使用重置样式表 为什么浏览器需要设置默认样式 无论如何我们都会删除它们 对吗 因为某些规则默认
  • 按百分比设置 bootstrap 模态身高

    我正在尝试制作一个带有主体的模态 当内容变得太大时 该主体会滚动 但是 我希望模式能够响应屏幕尺寸 当我将最大高度设置为 40 时 它没有任何效果 但是 如果我将最大高度设置为 400px 它会按预期工作 但不会响应 我确信我只是错过了一些
  • Jquery 中的动态滚动位置

    请帮助我解决以下情况 我有 3 个页面 当滚动到达第二页时 用户滚动页面 它必须找到特定的 ID 然后触发一个函数 一旦第三页开始 另一个函数就会触发 根据要求我不应该使用任何插件
  • 使用流体网格系统在引导程序上对齐输入

    我正在创建一个表单 要求用户输入他们的姓名和电子邮件地址 表单的第一行对于姓名的每个部分都有两个并排的输入 第二行对于电子邮件地址有一个输入 其宽度应与第一行组合的宽度相同 我正在尝试使用流体网格系统 但无法将第二行与第一行对齐
  • 博客上的随机背景图片

    我正在尝试整理某种代码 以随机化我的博主博客上的背景图像 我的编程技能不足 但我愿意尝试建议 我记得在 WordPress 中实现了类似的功能 通过将 php 代码文件存储在图像文件夹中 然后从 CSS 中调用该 php 文件 就像它是图像
  • dom 元素转换后 IE 显示水平滚动条

    我在网站的各个地方使用了以下 css http jsfiddle net uycq29mt 1 http jsfiddle net uycq29mt 1 a position absolute background red width 60
  • 无法更改 SVG 元素的类名

    我想通过单击按钮来更改应用于 SVG 的类 代码是here http jsfiddle net p19rnmev 我的 SVG 看起来像
  • 菜单作为水平无序列表或表格?

    我有一个无序列表 水平显示为页面的顶部菜单栏 我已经让它显示得相对较好 尽管我一直在调整 IE6 和 IE7 的间距 因为它无法正常显示 令人震惊 无论哪种情况 使用表格来显示菜单还是使用一些CSS hack 我找不到解决方法 会更好吗 显
  • 引导程序。如何添加多个add affix属性?

    我正在使用 Bootstrap Affix 如下所示 div 我添加这个 css 来修复触发附加时的位置 affix position fixed top 20px z index 1 margin left auto margin rig
  • Ionic 2 占位符文本样式

    我正在使用 Ionic 2 rc0 开发一个应用程序 并且整个应用程序中有几个仍然需要样式设置的输入字段
  • iOS 11 浏览器图像错误

    在 iOS 11 中滚动页面时出现以下错误 在 Firefox Safari 和 Chrome 中 在 Android 设备中 不会发生该错误 这些是背景图像 我不知道这是否是导致错误的原因 图 2 显示了图像在 Android 中的用途和
  • 响应式网格布局框架[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何在CSS3媒体查询中使主体宽度自动等于设备宽度?

    我现在正在做一个移动网站 并尝试使用 CSS3 媒体查询来定位不同的设备 我的部分代码如下 media screen and max width 320px body width 320px some other style 正如您所看到的
  • iframe 重新加载按钮

    我浏览了很多网站 但似乎没有一个能正常工作 或者我不明白它们 我想要一个刷新某个 iframe 的简单按钮 该按钮将位于父页面上 并且 iframe 名称为 Right 有很多方法可以做到这一点 假设这个iframe markup 我们可以
  • css 计数器在 Internet Explorer 中无法工作以获取隐藏内容 - 如何修复?

    我们想要一些编号列表 并发现了这个很酷的计数器 您可以在 css 中使用它来让浏览器为您计算数字 ol instructions counter reset instructions section ol instructions gt l
  • 如何使 jQuery 向上动画

    我有一些 jquery 运行得相当好 但是当我将鼠标悬停在有问题的元素上时 底部向下扩展 这并不意外 但不是所需的效果 我希望元素的底部保持静止 而元素的顶部向上扩展 如果您想查看我目前拥有的内容 您可以导航至http demo ivann

随机推荐

  • 使用 JS 从 SharePoint 日历中检索事件编号

    我有一个 SharePoint 日历列表 并且正在寻找一个脚本来检索一天的事件数 例如 今天 即 8 月 10 日 我只想检索日历中存储的事件数 任何建议都会非常有帮助 在 JavaScript 中查询日历的问题 重复 通常 使用 REST
  • System.Net.WebException:请求已中止:请求已取消

    我有一个 WCF 服务 在负载条件下一直给我这个错误 并且我似乎无法重新创建该错误 我们已经尝试寻找解决方法大约一周了 但没有这样的运气 我看到的错误有两个部分 System ServiceModel CommunicationExcept
  • 在 Erlang 中展平嵌套列表的列表

    我正在做练习Erlang编程 问题是 编写一个函数 给定一个嵌套列表的列表 该函数将返回一个平面列表 例子 flatten 1 2 3 4 5 6 1 2 3 4 5 6 提示 使用concatenate解决flatten 这是我的conc
  • 重载“+”的不可变列表有意义吗?

    它当然没有脱离 NET框架的标准实践 当我看到一个a b我总是假设会有新的东西被创造出来 static void Main string args var list BuildList ImmutableList
  • time_t 最终的 typedef 是什么?

    我搜索了我的 Linux 机器并看到了这个 typedef typedef time t time t 但我找不到 time t定义 The 文章对此进行了一些阐述 底线是类型time tC 规范中不保证 The time tdatatyp
  • 验证日期 - Bean 验证注释 - 使用特定格式

    我想验证日期格式YYYY MM DD hh mm ss Past validates for a date that is present or past But what are the formats it accepts 如果那不可能
  • org.hibernate.AssertionFailure

    我的线程执行时有时会遇到这个奇怪的错误 这可能与什么有关 2011 Jun 25 09 05 22 339 ERROR AssertionFailure 45 an assertion failure occured this may in
  • 使用部分形状通过 Typescript 进行单元测试

    假设我想在打字稿中对一个函数进行单元测试 该函数使用具有复杂形状的 选项 类型 对象 参数 interface option param1 string param2 number param3 param4 string param5 b
  • 如何将所有批量数据加载到 Keras(Theano 后端)的 GPU 内存中?

    Keras将数据批量加载到GPU上 作者注here https github com fchollet keras issues 249 对于小型数据集 这是非常低效的 有没有办法修改 Keras 或直接调用 Theano 函数 在 Ker
  • 禁用 Android Studio 警告:“访问可以...”

    更新 Android Studio 后 我收到以下字段的警告 public int ex1 0 int ex2 0 或方法或嵌套类 当它们仅在一个类或包中使用时 访问可以是私有的 或 访问可以是仅限包的 这是可以的 我不想要这些警告 但我找
  • 如何遍历 Shadow DOM 中的元素

    I have div id outer shadowRoot div id inner button 在按钮的单击处理程序中 我想引用 div 内部 在非 ShadowDom 世界中 这将是document getElementById i
  • Windows Azure 网站上运行的是哪个版本的 node.js?

    Windows Azure 网站上实际运行的是哪个版本的 node js Windows Azure 网站服务器上预安装了许多版本的节点 您可以通过在 package json 文件中指定所需的最低版本来选择使用哪一个版本 指示here h
  • 如果物理内存的大小是2^32-1,那么虚拟内存的大小是多少?

    我知道物理地址是 32 位长 但是如何通过这些信息找出虚拟内存的大小 虚拟内存地址空间的总大小为2 32x86架构和更大 目前约为 2 48 x64建筑学 然而 操作系统通常会保留一部分空间 因此 32 位应用程序不一定能一次寻址 4GB
  • 在 OSX 和 PHP 版本 5.5.3 中使用 MAMP 时,php 编辑不会立即显示

    更改php文件并刷新浏览器后 更改不会立即显示 而是在15秒后刷新显示更改 但是 PHP 版本 5 2 17 的更改会立即显示 但 PHP 版本 5 5 3 不会立即显示 phpinfo 报告 php 版本 5 2 17 的 HTTP 响应
  • 指定的 deps.json '$$$' 不存在

    我对 NET Core 相当陌生 我有一个 NET Core WebAPI 项目 MyWebApp 另外 我有使用 EntityFrameworkCore 的 Net Core 类库项目 MyLib 当我尝试使用添加迁移时 出现错误指定的
  • Android IAB:设备上无法使用计费服务

    我正在尝试在我的应用程序中实现 IAB 每次应用程序启动时 启动都会失败并显示 Problem setting up In app Billing IabResult Billing service unavailable on devic
  • Heroku - 将单个表转储并加载到共享 postgres 数据库

    我想知道是否有一种简单的方法可以将一个表的内容转储或加载到heroku共享数据库 postgres Heroku 推荐了 pgbackups 插件 但根据文档它支持转储和加载整个数据库 我需要的只是转储 加载单个表 您可以使用水龙头 htt
  • Mysqldb 属性错误:游标

    我开始在 python 中使用 mysqldb 模块 并且我似乎对调用查询的 标准 方式有一些问题 我知道标准方法是创建游标 然后用它来执行查询 然而 当我尝试实例化一个时 它给了我以下错误 属性错误 光标 我的数据库类如下所示 class
  • Java:通过 UserObject 字段递归搜索 TreeModel?

    我有一个使用 DefaultTreeModel 的 Jtree 每个单独的节点都包含一个包含各种字符串字段的 UserObject 我想通过递归遍历来查找并选择一个节点 直到找到 UserObject 与其字段之一匹配的 DefaultMu
  • 如何在bootstrap中使用垂直对齐

    简单的问题 如何使用 bootstrap 在一个列内垂直对齐一个列 这里的例子 我想垂直对齐child1a和child1b http bootply com 73666 http bootply com 73666 HTML div cla