程序员经验分享-hwhale

如何在 Bootstrap 4 中将卡片居中？

2024-03-10

我正在使用 bootstrap 4 alpha 3。
我想将卡片水平居中在页面中间。

Preview / link: http://codepen.io/vaibhavsingh97/full/VjRAXW http://codepen.io/vaibhavsingh97/full/VjRAXW

我已经尝试了 Bootstrap 4 卡片示例页面上列出的所有不同选项。

我怎样才能实现这个目标？


添加 .card 的 css

.card {
        margin: 0 auto; /* Added */
        float: none; /* Added */
        margin-bottom: 10px; /* Added */
}

这里是pen http://codepen.io/anon/pen/VjNmNY

UPDATE:您可以使用该类.mx-auto可在 bootstrap 4 到中心卡中使用。

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

html

css

Bootstrap4

如何在 Bootstrap 4 中将卡片居中？ 的相关文章

  • 跳过在 Chrome 中不起作用的链接

    首先 我看过上一个问题 https stackoverflow com questions 3572843 skip navigation link not working in google chrome但遗憾的是它似乎没有提供任何解决方

  • IE6 CSS 显示：表格修复？

    我正在开发一个网络应用程序 不幸的是它必须与有史以来最糟糕的软件一起工作 是的 即 ie6 我真的很喜欢CSSdisplay table and display table cell属性 但当然它在 ie 中不起作用 有没有人找到解决这个问

  • mediaelement.js 视频无法在 IE8 中播放

    我已经浏览了这里提出的所有其他问题 但没有什么能真正解决我的问题 目前 视频可以在 Chrome Safari FF 和 IE9 中加载和播放 但不能在 IE8 中加载 这是我需要支持的最后一个浏览器 您可以查看页面here http 20

  • 标签转换问题

    我是 html css 新手 当用户在输入框中输入无效输入时出现错误 然后特定输入字段的标签会下降 但是当用户输入时 输入正确则工作正常

  • 如何使用纯 CSS 始终使灵活的正方形在视口中居中？

    我知道这个问题 高度等于动态宽度 CSS 流体布局 https stackoverflow com questions 5445491 height equal to dynamic width css fluid layout 但我想要更

  • IFrame 内容交换错误？

    我有一个包含许多 iframe 的网页 包括第三方 iframe 例如广告感知和各种共享按钮 在 Firefox 中 我注意到这些 iframe 的内容有时会被交换 这样您就会在另一个 iframe 所在的位置看到广告感知广告 iframe

  • PHP DOM 获取节点值 html？ （不剥离标签）

    我正在尝试使用nodeValue获取文件中div标签的innerhtml 但是此代码仅输出纯文本 并且似乎从div内部删除了所有html标签 我如何更改此代码以输出 div 的 HTML 内容而不是纯文本 并且还输出包装其子元素的主 div

  • 为什么 margin-top: auto 和 margin-bottom:auto 的工作方式与左侧和右侧的对应项不同？

    如果我像这样设置 div 的 CSS margin 属性 div margin left auto margin right auto 我得到一个在页面中水平居中的 div like so http jsfiddle net T8Hnb 但

  • 如何制作 HTML/CSS/JS 变色背景（如 Kahoot.it 那样）

    如何使用 html 和 css 以及可能的 javascript 制作类似于 waht 的颜色变化 褪色背景https kahoot it https kahoot it has 你应该学会检查和获取 keyframes bgcolor 0

  • 为具有可变内容的内联块元素提供相同的高度？

    我有 4 个宽度固定但内容可变的内联块元素 并且我希望所有这些元素具有相同的高度 最大元素的高度 请参见这个jsfiddle http jsfiddle net kKZXj 我应该如何实现这个目标 如果仅使用 css 无法做到这一点 那么使

  • 如何使用固定位置 div/ 的浮动、清除和溢出元素并排对齐两个 div/

    所以我一直在尝试将两个 div 并排对齐而不重叠 我有一个 div 将被固定为侧边栏 而右侧的 div 将被固定为内容 希望有人可以帮助我 body background color 444 margin top 0 margin bott

  • 将 matplotlib png 转换为 base64 以在 html 模板中查看

    背景 你好 我正在尝试制作一个简单的网络应用程序 按照教程计算阻尼振动方程 并将结果的 png 返回到 html 页面 然后将其转换为 Base64 字符串 Problem 该应用程序运行正常 只是在计算结果时返回损坏的图像图标 可能是因为

  • 在 HTML SELECT 标记中禁用键盘

    我想禁用 HTML SELECT 标记的键盘 以便用户只能使用鼠标来选择选项 我试过了event cancelBubble true on the onkeydown onkeyup and onkeypress没有运气的事件 有任何想法吗

  • Tailwind CSS：在图像悬停时显示文本

    如何使用 Tailwind CSS 在图像悬停时显示文本 在图像悬停时显示文本 这是我的头像吗 我希望当用户将鼠标悬停在图像上时显示文本 哺乳动物 img src img cat categories mammals png alt mam

  • 大小相同的表格单元格填充包含表格的整个宽度

    有没有办法使用 HTML CSS 具有相对大小调整 使一行单元格拉伸其所在表格的整个宽度 单元格的宽度应该相等 并且外表的大小也是动态的 table width 100 目前如果我不指定固定大小 单元格只是自动调整大小以适应其内容 您甚至不

  • 显示带有 jQ​​uery-ui 自动完成功能的微调器

    我一直在到处搜索 但没有看到有人这样做 是否有可能拥有某种带有 jQ uery UI 自动完成功能的旋转器 加载器 1 8 获取数据时 我的解决方案是使用 ui autocomplete loading CSS 类 该类在 ajax GET

  • 网页抓取 - 如何识别网页上的主要内容

    给定一个新闻文章网页 来自任何主要新闻来源 例如时报或彭博社 我想识别该页面上的主要文章内容 并丢弃其他杂项元素 例如广告 菜单 侧边栏 用户评论 在大多数主要新闻网站上都可以使用的通用方法是什么 有哪些好的数据挖掘工具或库 最好是基于Py

  • 如何制作具有移动外观的 emberjs 应用程序（如 jquery mobile 中的应用程序）？

    我有一个使用 Emberjs 的简单移动 Web 应用程序项目 对于外观和感觉 我想要类似于 JQuery Mobile 的东西 有没有办法混合使用 Emberjs 和 jquery mobile 如果是这样 怎么办 我查看了 Travis

  • 使用后代选择器的响应式网站

    我试图使用媒体查询使我的网站响应 但是当我在代码的某些部分使用后代选择器时 页面没有响应 当我使用此代码时 该页面是响应式的 div1 float left width 20 height 200px background color re

  • Safari 的 Javascript 与 document.write 的问题

    我的问题只发生在 Safari 上 IE FF Chrome 和 Opera 都可以完美运行 我正在向 DOM 添加一个对象 与 YouTube 的方式完全相同 具体取决于 ActiveX 或 NPAPI 因此在确定写入对象类型后 我通过以

随机推荐

  • vs2015不断添加project.lock.json到tfs

    我的文件夹结构是 解决方案文件夹 tfignore 文件 每个项目的文件夹 但 vs2015 继续将我的 project lock json 文件包含在源代码管理中 在我的 tfignore 文件中 我添加了 project lock js

  • C 中的 case 标签不会减少为整数常量？

    我正在开发一个游戏 我运行了我的代码并收到错误 case 标签不会减少为整数常量 我想我知道这意味着什么 但是我该如何解决它呢 这是我的代码 include

  • 如何将列表列表从宽变为长

    我有一个具有共同结构的列表列表 require data table l lt list a1 list b data table rnorm 3 c data table rnorm 3 d data table rnorm 3 a2 l

  • C++ 与 Python 精度

    尝试查找 num num 的前 k 位数字的问题我用 C 和 Python 编写了相同的程序 C long double intpart num f digit k cin gt gt num gt gt k f digit pow 10

  • 元组比较

    我有一本定义如下的字典 d date tuple date open tuple open close tuple close min tuple min max tuple max MA tuple ma 这些元组中的每一个都包含一个值列

  • 在 iOS 中实现 Google 自定义搜索 API

    我浏览了几个链接 以便找到在 ios 应用程序中实现 google customsearchapi 的正确步骤 并在此过程中花费了大约 6 7 个小时 Links https developers google com custom sea

  • 模型的 flow_from_directory 拟合产生 ValueError：输入 0 与图层模型不兼容

    我有以下模型 我尝试使用 ImageDataGenerator 与 flow from directory 和 fit generator 来拟合模型 但是出现以下错误 ValueError Input 0 is incompatible

  • 在 Swift 中接收 Websocket 数据

    我继续这个从这个问题 https stackoverflow com questions 65988137 how do i send a dictionary to a client using vapor websockets 6598

  • 如何使用React hooks和react-router执行身份验证

    我正在尝试在每次路线更改时对用户进行身份验证react router dom and react hooks 这个想法是 每次用户导航到某个路线时 系统都会进行 api 调用并对用户进行身份验证 我需要实现这一目标 因为我使用react r

  • 指令单击外部角度 6

    我将 Angular 从 4 升级到 6 因此我的点击策略出现了问题 它停止在所有组件上工作 我的指令 import Directive Output EventEmitter ElementRef HostListener from an

  • 如何将 jQuery 与 amp-script 一起使用？

    AMP 文档提到将 jQuery 与 amp script 组件一起使用 https amp dev documentation guides and tutorials develop custom javascript https am

  • 在 WPF 中创建侧边栏 - 像 Windows 桌面应用程序一样的弹出窗口

    我想做的是在 WPF 中创建一个桌面应用程序 其 UI 是这样的 一个小图标将保持固定在屏幕左边缘的中心 单击 或悬停 时将滑动打开一个侧边栏 如谷歌 桌面栏 沿着屏幕左边缘运行 固定位置 无法移动 请注意 我要求的可能类似于应用程序栏 但

  • 如何让 Bower 构建包？

    有没有办法让 Bower 在从 GitHub 克隆后运行包 grunt 我正在尝试使用 Bower 但我使用的软件包之一是 Bootstrap 扩展 x editable 问题是 虽然其他软件包将完整构建的版本推送到 github 所以当

  • AWS with .NET - 从 CloudWatch 读取日志 - 没有返回日志数据

    我正在尝试使用 NET 从 CloudWatch 读取使用 SNS 发送的消息的日志数据 从 CloudWatch 控制台 CloudWatch CloudWatch Logs Logs Insights 我输入 Date range cu

  • unity3d中的屏幕录制

    unity如何进行屏幕录制 我想在运行游戏时录制屏幕 游戏玩法 那应该是 play stop replay 从设备本地保存录音 从我的设备打开 加载 我们已经录制了 在我的游戏中 一台可以捕获本机相机的相机和一台 3D 模型 我希望记录两者

  • 原则 2 没有要处理的元数据类

    我已经将 zf 1 与原则 2 集成 我通过以下方式创建了实体 phpology php orm convert mapping force from database 注释 C wamp www ip application models

  • 存储星期几和时间？

    我有一个关于在数据库中存储星期几和时间的两部分问题 我正在使用 Rails 4 0 Ruby 2 0 0 和 Postgres 我有某些活动 并且这些活动都有时间表 例如 对于 跳伞 活动 我可能会在周二 周三和下午 3 点进行 有没有办法

  • SSDT 项目中带有 UDF 和视图的数据库参考

    遇到一个奇怪的问题 假设一个空解决方案中有两个数据库项目 Bart 和 Homer 巴特已被添加为荷马的数据库参考 Bart项目定义了一个函数 CREATE FUNCTION dbo Message RETURNS NVARCHAR 255

  • Git 分离头问题

    我今天读了很多与此问题相关的帖子 这里有一篇有用的帖子 修复 Git 分离头 https stackoverflow com questions 10228760 how to fix a git detached head 为什么我的 G

  • 如何在 Bootstrap 4 中将卡片居中？

    我正在使用 bootstrap 4 alpha 3 我想将卡片水平居中在页面中间 Preview link http codepen io vaibhavsingh97 full VjRAXW http codepen io vaibhav

热门标签