- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
以 Bootstrap 4 的定价模板为例,假设我有不同文本长度的卡片标题,因此在某些屏幕分辨率下,卡片标题的高度会变得不同。我想确保它们始终具有相同的高度。
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">This is a really long header that is going to cause problem.</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>10 users included</li>
<li>2 GB of storage</li>
<li>Email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Pro</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>20 users included</li>
<li>10 GB of storage</li>
<li>Priority email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Enterprise</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>30 users included</li>
<li>15 GB of storage</li>
<li>Phone and email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
</div>
</div>
</div>
我能完成这项工作的唯一方法是做类似的事情
.card-header{height: 50px;}
在 CSS 中,但这不允许动态调整大小。任何帮助是极大的赞赏。这是 Codepen .
最佳答案
在 Bootstrap-4 中,将这些类用于卡片的标题。
d-flex
- 将其显示更改为 flex
align-items-center
- 将其内容垂直居中justify-content-center
- 将内容水平居中h-100
- 使其高度 100%
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header d-flex align-items-center justify-content-center h-100">
<h4 class="my-0 font-weight-normal flex-grow-1">This is a really long header that is going to cause problem. You can add more and more words but height will be the same! This is a really long header that is going to cause problem. You can add more and more words but height will be the same!</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>10 users included</li>
<li>2 GB of storage</li>
<li>Email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header d-flex align-items-center justify-content-center h-100">
<h4 class="my-0 font-weight-normal flex-grow-1 ">Pro</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>20 users included</li>
<li>10 GB of storage</li>
<li>Priority email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
</div>
</div>
</div>
</div>
我建议你使用最新版本的 bootstrap 并检查这个 codepen
如果其中一张卡片的正文内容较少,则其标题的高度较高。将这些类添加到所有卡体以解决此问题。
flex-column
- 将其 flex-direction
更改为 columnh-100
- 使其高度 100%
<div class="card-body flex-column h-100">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header d-flex align-items-center justify-content-center h-100">
<h4 class="my-0 font-weight-normal flex-grow-1">This is a really long header that is going to cause problem. You can add more and more words but height will be the same! This is a really long header that is going to cause problem. You can add more and more words but height will be the same!</h4>
</div>
<div class="card-body flex-column h-100">
<h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>10 users included</li>
<li>2 GB of storage</li>
<li>Email support</li>
<li>Help center access</li>
<li>2 GB of storage</li>
<li>Email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header d-flex align-items-center justify-content-center h-100">
<h4 class="my-0 font-weight-normal flex-grow-1 ">Pro</h4>
</div>
<div class="card-body flex-column h-100">
<h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>20 users included</li>
<li>10 GB of storage</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
</div>
</div>
</div>
</div>
检查这个codepen
关于html - Bootstrap4 使卡头高度相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50386953/
我正在尝试将多个项目转换为 classy-prelude眼下。虽然大多数行为对我来说似乎相当简单,但 (head . head) 在简单的 2D 列表上给出了神秘的错误。 考虑以下 GHCi sess
我创建了这个类来从请求中获取 Header 值。 public class AuthenticationHeader { private static IHttpContextAccesso
这里有两段代码。 工作: joins :: [String] -> String -> String joins [] _ = "" joins [x] _ = x joins xs d = head
我是编程新手,正在Windows中使用vscode并通过Mingw 64进行编译。尝试了数天后,我要求对此问题做出解答。我用谷歌搜索了很多次。这是我的项目树的外观。请帮助我包括并将 libA 链接到
我正在研究 Ninety-Nine Scala Problems 的 P07 问题: P07 (**) Flatten a nested list structure. Example: scala>
这里有两段代码。 工作: joins :: [String] -> String -> String joins [] _ = "" joins [x] _ = x joins xs d = head
我正在使用现成的欧洲 cookie 政策脚本。问题是,我的 Hubspot CMS 只允许所有内容的全局标题或每个页面的单独标题。我们有 120 个页面,很难手动定义它,但我们需要一个用于德语页面的脚
Solaris 10 SPARC Sun Studio C 编译器 12.3 在 SPARC64 机器上,如果您访问一个在相关 4 或 8 字节边界上未正确对齐的变量,您将获得核心转储。这需要编码人员
我正在尝试从服务器列表中获取 apache 版本。我正在考虑解析 header ,但是我无法发送 HEAD 但它可以与 GET POST 等一起使用。 这是我的代码: import java.io.B
嗨,我是 github 的新手,当我对代码做了一些更改然后 merge 到上游时,如果有任何冲突,它将执行以下操作。 Auto-merging Global.asax.cs CONFLICT (con
例如,获取偏移量 Y 之后的前 X 行的建议方法是什么?我目前正在做的是: offset, limit = 2, 2 df=pd.DataFrame([{'a':1}, {'a': 2}, {'a':
当我在R块 header 中插入长标题等内容时,能够将 header 拆分为多行会很好。 有没有简单的方法可以做到这一点? 例如。: ```{r, echo=FALSE, warning=FALSE,
我刚刚开始使用 Erlang(虽然有一些 lisp 背景)并且有一个关于列表模式匹配的问题。 如果我说 [Head | Tail] = [1, 2, 3]. 然后我得到 Head = 1 Tail =
我的 index.php 文件开头有这段代码: if ( !isset($_GET['cat']) ) die(header("Location: ?cat=top")
对第 3 方应用程序进行一些 SOAP 调用。他们提供此 soap header 作为应用程序期望的示例。如何在 PHP 中创建这样的 SOAP header ?
我对 git 仓库下的文件做了一些更改,我使用 git commit 提交了文件 然后我尝试使用 git push origin master 推送到 master,它返回了 Everything u
我刚刚尝试从 url 下载 webp 图像,但是当我尝试处理存储的图像时,我发现了一些不同的东西。 如果我从浏览器下载图像,它可以使用 x/image/webp 包解码,但如果我使用 http.Get
这是来自 slices 的略微修改的代码 var buffer [256] byte func SubtractOneFromLength(slice []byte) []byte { sli
在 Linux 中是否有一种方法可以请求 Head 或 Tail 但要忽略额外的记录偏移量。 例如,如果文件 example.lst 包含以下内容: row01 row02 row03 row04 r
代码: /* * File: problem5.c * Author: levihackwith * Description: Write a Pop() function that is th
我是一名优秀的程序员,十分优秀!