我如何在bootstrap 4中构造一个卡片标题，以保持三个元素在一行中，截断中间元素中的文本以获得较小的屏幕尺寸？
在Bootstrap 4中构造一个卡片标题，以保持三个元素在一行中，截断中间元素中的文本以适应较小的屏幕尺寸，可以使用以下步骤：
- 创建一个包含三个元素的卡片标题容器，可以使用Bootstrap提供的
card类来创建卡片容器。
<div class="card">
<div class="card-body">
<!-- 卡片标题内容 -->
</div>
</div>- 在卡片标题容器中，使用Bootstrap的网格系统将三个元素放置在一行中。可以使用
row类创建行容器，并使用col类将每个元素放置在列容器中。
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<!-- 第一个元素 -->
</div>
<div class="col">
<!-- 第二个元素 -->
</div>
<div class="col">
<!-- 第三个元素 -->
</div>
</div>
</div>
</div>- 为了在较小的屏幕尺寸下截断中间元素中的文本，可以使用Bootstrap的文本截断类
text-truncate。
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<!-- 第一个元素 -->
</div>
<div class="col">
<p class="text-truncate">
<!-- 第二个元素的文本 -->
</p>
</div>
<div class="col">
<!-- 第三个元素 -->
</div>
</div>
</div>
</div>以上是在Bootstrap 4中构造一个卡片标题，以保持三个元素在一行中，截断中间元素中的文本以适应较小的屏幕尺寸的方法。关于Bootstrap 4的更多信息和使用方法，您可以参考腾讯云的Bootstrap 4产品介绍页面：Bootstrap 4产品介绍。
相关·内容
2回答
使用flexbox时，引导文本不会截断。
html、bootstrap-4、flexbox、truncate、ellipsis
我正在使用柔性盒制作一个引导卡，无法使文本截断工作。卡片文本如预期的那样包装，但是，当没有足够的空间时，卡片标题不会被截断，相反，它会将内容推送到卡片之外()。
有人能解释为什么会这样吗？
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="card d-flex flex-row">
<a href="#">[I
浏览 5提问于2020-01-29得票数 3
回答已采纳
3回答
引导4“文本-截断”类将文本放置在下面
html、css、laravel、bootstrap-4
如果标题太长，我尝试在标题上添加省略号。我想要尊重响应的布局，我不想增加固定宽度卡标题。
我使用文本截断在卡片标题上添加省略号。
卡片在列中使用文字左侧的图像。
<div class="container">
<div class="row">
@foreach($posts as $post)
<div class="col-lg-6 p-1">
<div class="card border-0">
浏览 1提问于2019-04-09得票数 0
回答已采纳
1回答
引导卡不遵循列规则
html、css、bootstrap-4、bootstrap-cards
我有以下代码，其中包含一行引导模板卡：
<div id="row1-cards" class="row mx-5 mt-3 row-cols-1 row-cols-md-2 row-cols-lg-4">
<div class="card col m-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-
浏览 0提问于2020-06-08得票数 2
回答已采纳
1回答
Bootstrap 4图像卡覆盖卡片文本
html、bootstrap-4
我尝试在Bootstrap 4中创建3个带有标题的简单图像卡，但无论我如何尝试，卡中的图像占据了整个卡片，覆盖了下面的标题。
卡片看起来应该和示例一样，因为我使用了相同的代码，只是把它放在一行中。卡片文本在那里，但它就在图像的正下方。如何使卡片更长，使图像留在顶部，并显示下面的文本？
下面是Bootstrap的示例卡片：
我的是这样的：
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="
浏览 2提问于2019-02-14得票数 1
3回答
如何设置整个列的引导卡的背景颜色？
html、css、twitter-bootstrap
我有个关于自助卡甲板的问题。我创造了一个卡片甲板与两张卡片在一排。在第一张卡上，我在标题下得到了一些文本，而在第二张卡中，标题下没有文本。在这种情况下，灰色的颜色并不像你在例子中看到的那样填充整个卡片。我怎么才能修好它呢，那孔柱也是灰色的？
谢谢你的帮忙!
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet
浏览 2提问于2020-01-24得票数 0
回答已采纳
1回答
将div对齐到Bootstrap4卡体的底部
javascript、html、css、bootstrap-4
我在处理鞋带卡。我有卡片头和卡片脚，他们工作得很好。在卡片的身体里我有一个卡片标题。此标题可在卡体中占用1或2行。在这个卡片的身体里，我也有一些信息。我想将这个信息div与卡片体底部对齐，因为我使用行/集来很好地对齐事物，但是因为1张卡片标题是1行，而另一张是2行，当你在页面中查看卡片时，这个附加信息并不完全在卡片之间排列，而底部对齐将解决我认为的问题。
所以基本上，我想让橙色的div在他们的卡片底部排成一列，因为然后在视觉上穿过卡片，他们会看上去排队。
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/
浏览 0提问于2019-05-03得票数 0
回答已采纳
1回答
我如何在bootstrap 4中构造一个卡片标题，以保持三个元素在一行中，截断中间元素中的文本以获得较小的屏幕尺寸？
html、css、bootstrap-4、alignment
我有一系列手风琴用的卡片。每张卡都有一个卡头和一个卡体。 每个卡片标题都有四个元素:用于克拉图标的<i>、带有卡片标题的<h4>、用于从用户接收数据的<input>以及仅为%字符的最终<h4>。 期望的结果是<i>和第一个<h4>向左浮动，并且的文本将填充未被其他三个元素占用的内联空间，但会根据需要在所有设备大小上截断。<input>和最终<h4>不应调整大小，应始终位于行的末尾。所有这四个元素必须始终保持在同一行上，并且不能堆叠。 我现在已经花了六个小时浏览文档和各种博客，但还没有让它起作用。我
浏览 22提问于2020-10-18得票数 0
2回答
在较小屏幕尺寸上重新排序不同列中的卡片
html、css、twitter-bootstrap
我现在有一个2列的网页，左边有2张卡片，右边有4张卡片。当我在较小的屏幕(lg或以下)上查看页面时，列会按照设计重新洗牌，将左侧的卡片堆叠在右侧卡片的顶部。 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xl-6 col-lg-12">
浏览 8提问于2019-04-27得票数 0
2回答
为什么我的引导卡头没有填充整个卡的宽度？
django、bootstrap-5、bootstrap-cards
我是Bootstrap和Django的新手。我正在尝试一张卡片的样式，但是卡片的标题(背景)并不能填充整个卡片的宽度。下面是一个示例：
以下是代码：
<div class="container">
<div class="grid">
<div class="row">
{% for list, content in content.items %}
<div class="card col-md-6 shadow-lg">
<a h
浏览 10提问于2022-05-17得票数 0
回答已采纳
1回答
全屏幕引导4卡与高图表
javascript、jquery、highcharts、bootstrap-4、fullscreen
我有几个(引导)卡，我想有机会展示这个全屏。这些卡片上有图表。问题是，当你进入全屏模式时，高图表的高度不能适应。
不久前，我在引导面板上问了同样的问题，然后"daniel_s“为面板做了这个例子。直到现在，我在底部增加了一些列，并将其从面板转换为卡片。不幸的是，这个例子不再起作用了。再次，"daniel_s“做了一个例子，但高度仍然不是100%。
是否有可能自动调整高图表的比例，使比率(在底部和头部的列)保持与本例相同？
此外，我还想知道我如何得到标题文本和图标的一行。所以文字在左边，图标在右边。
HTML
<link href="https://stackpat
浏览 0提问于2019-05-25得票数 1
回答已采纳
2回答
Bootstrap 4卡保持缩放，而不是在固定区域内进行调整
html、css、bootstrap-4
我试图获得一些功能，以与bootstrap 4卡工作，但我一直有问题，因为它不断缩放与文本的长度。我的代码如下
<div class="row row-container">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">
浏览 0提问于2020-11-12得票数 0
2回答
如何使用bootstrap row类为卡片创建3列
php、html、css、bootstrap-4、laravel-5.8
我尝试使用bootstrap 4 row类在三个不同的列中显示页面的内容(以卡片表示)。我该怎么做呢？
我使用的是Laravel 5.8和bootstrap 4，其他的bootstrap功能，比如carousel和nav bar都可以正常工作。
主要刀片文件-views/layout/app.blade.php中的内容代码如下所示；
<div class="container-fluid">
@yield('content')
</div>
然后，对于页面，我想要的布局是-views/pag
浏览 19提问于2019-10-29得票数 0
回答已采纳
2回答
使用Angular指令使用所需数量的卡填充引导卡组
javascript、html、css、angular、bootstrap-4
我使用的是Angular 9.1.8。 我正在使用Bootstrap Card Groups and Cards构建一个Angular组件。我使用我的卡片组来确保在显示一个更大的卡片结果集时，在给定行中显示两张以上的卡片。考虑以下4张卡片： <div class="container">
<div class="card-group">
<!-- card 1 -->
<div class="card bg-light text-dark">
<img cl
浏览 13提问于2020-07-01得票数 0
1回答
在较大的视口中强制响应式引导将水平卡转换为垂直卡
html、css、bootstrap-4
我正在用Bootstrap 4卡和它们的响应行为进行实验。我的目标是有两个水平的Bootstrap卡水平堆叠，只折叠成垂直卡是较小的视口大小的移动屏幕兼容。虽然我可以使用标准的bootstrap代码来实现这一点，但在变成垂直的卡片之前，卡片首先缩小大小以匹配减少的视口，偏离我的图片的中心。有没有什么办法可以让我在一个更大的视窗中强制水平卡片进入竖直卡片样式？
HTML：
<div class="container-fluid">
<div class="card-deck justify-content-center"&
浏览 1提问于2020-07-21得票数 0
3回答
如何折叠div on media query for mobile (没有javascript /只有bootstrap 4)
html、css、twitter-bootstrap、media、collapse
关于Bootstrap 4:我试图仅在移动视图上折叠.card div。我尝试过.collapse类，但在这种方式下，它在所有尺寸的屏幕上都会崩溃。这是我的代码，如果有人想看的话；
<div class="col-lg-3">
<div class="card>
<div class="card-header">
<a data-toggle="collapse" data-target="#t10"><h3>Top
浏览 0提问于2018-02-06得票数 0
1回答
如何使图像半高？
twitter-bootstrap、css、bootstrap-4
我做了一个图像列表，并试图将这个图像的高度减半。
.img {
background: #255;
}
img {
max-width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div clas
浏览 1提问于2019-04-01得票数 0
1回答
Boostrap不想在卡中应用justify-content-between
html、css、bootstrap-4
与Bootstrap 4，我正在制作一个分类广告的水平卡片，并希望在标题的广告标题在左边，价格在右边。使用django模板： <section class="card">
<div class="row no-gutters">
<div class="col-sm-4">
<img src="{{ad.thumbnail.url}}" alt="" class="img fluid card
浏览 13提问于2020-08-08得票数 0
回答已采纳
2回答
引导卡不下移
html、css、bootstrap-4、responsive、bootstrap-cards
我想找人帮忙处理我的自助卡。我有4张卡片，横贯整个页面的宽度。当在移动设备上访问网站时，它们仍然保持水平延伸，然后垂直延伸。我希望他们能站在另一个上面。我会感谢你的帮助。谢谢。
图片：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZ
浏览 0提问于2018-09-20得票数 1
回答已采纳
2回答
正确堆叠Bootstrap卡
html、css、bootstrap-4
我有一组bootstrap卡片，如下所示：
<div class="card-deck">
<div class="card">
<img class="card-img-top" src=".." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title<
浏览 0提问于2018-08-29得票数 0
2回答
如何使用bootstrap在屏幕尺寸超过1280的情况下浮动右边的卡体？
css、bootstrap-4
使用Bootstrap卡片，我试图浮动一张卡片-img左边，卡片主体右边，但float类对我不起作用。有人能告诉我我哪里做错了吗？
<div class="container">
<div class="row row-eq-height">
<div class="col">
<div class="card" style="">
<img class
浏览 6提问于2018-08-25得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
