程序员经验分享-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 中将卡片居中？ 的相关文章

随机推荐

  • 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

热门标签