Html 如何在引导4中包装(浮动)卡
我正在使用Bootstrap4测试版 我有一张卡片清单。我希望他们是固定的宽度,但高度将根据内容的变化 卡的数量可以从1到n 我想要的效果是,卡片从左到右排列,直到屏幕空间用完,然后换行到下一行 我已经尝试了Bootstrap4示例页面上列出的所有不同的卡片选项,但它们似乎没有包装好 我怎样才能做到这一点 下面的示例显示了它们3个,它们之间有很大的空间Html 如何在引导4中包装(浮动)卡,html,twitter-bootstrap,twitter4j,Html,Twitter Bootstrap,Twitter4j,我正在使用Bootstrap4测试版 我有一张卡片清单。我希望他们是固定的宽度,但高度将根据内容的变化 卡的数量可以从1到n 我想要的效果是,卡片从左到右排列,直到屏幕空间用完,然后换行到下一行 我已经尝试了Bootstrap4示例页面上列出的所有不同的卡片选项,但它们似乎没有包装好 我怎样才能做到这一点 下面的示例显示了它们3个,它们之间有很大的空间 <div class="card-columns"> <div class="card" style="w
<div class="card-columns">
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card"style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
卡片标题
这是一张较长的卡片,下面的支持文本是附加内容的自然引入。这个内容有点长
上次更新是在3分钟前
卡片标题
此卡片具有以下支持文本,作为附加内容的自然引入
上次更新是在3分钟前
卡片标题
这是一张更宽的卡片,下面的支持文本是附加内容的自然引入。这张卡片的内容甚至比第一张要长,以显示等高动作
上次更新是在3分钟前
卡片标题
这是一张较长的卡片,下面的支持文本是附加内容的自然引入。这个内容有点长
上次更新是在3分钟前
卡片标题
此卡片具有以下支持文本,作为附加内容的自然引入
上次更新是在3分钟前
卡片标题
这是一张更宽的卡片,下面的支持文本是附加内容的自然引入。这张卡片的内容甚至比第一张要长,以显示等高动作
上次更新是在3分钟前
这里是解决方案。。。
使用引导行和列来实现这一点,请遵循下面的代码
<div class="row">
<div class="col-lg-4 col-md-3 col-sm-6">
<div class="card">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
卡片标题
这是一张较长的卡片,下面的支持文本是附加内容的自然引入。这个内容有点长
上次更新是在3分钟前
我提出了一个浮动卡类,它可以工作:
<style>
.floating-card {
float: left;
margin: 5px;
max-width: 300px;
}
</style>
.浮动卡{
浮动:左;
保证金:5px;
最大宽度:300px;
}
用法示例:
<div class="floating-card sortable">
<section class="box-typical task-card task">
<div class="task-card-photo">
<img src="img/img-task.jpg" alt="">
</div>
<div class="task-card-in">
<div class="btn-group task-card-menu">
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="font-icon-dots-vert-square"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#"><i class="font-icon font-icon-pencil"></i>Edit</a>
<a class="dropdown-item" href="#"><i class="font-icon font-icon-archive"></i>Archive</a>
<a class="dropdown-item" href="#"><i class="font-icon font-icon-trash"></i>Delete</a>
</div>
</div>
<div class="task-card-title">
<a href="#">Create new webpage for sales and marketing stuff</a>
<span class="task-card-title-label">(BIG)</span>
</div>
<div class="progress-compact-style">
<progress class="progress" value="25" max="100">
<div class="progress">
<span class="progress-bar" style="width: 25%;">25%</span>
</div>
</progress>
<div class="progress-compact-style-label">37% done</div>
</div>
<div class="task-card-tags">
<a href="#" class="label label-light-grey">Default</a>
<a href="#" class="label label-light-grey">Primary</a>
<a href="#" class="label label-light-grey">Success</a>
</div>
</div>
<div class="task-card-footer">
<div class="task-card-meta-item"><i class="font-icon font-icon-comments-2"></i>10</div>
<div class="task-card-meta-item"><i class="font-icon font-icon-clip"></i>24</div>
<div class="avatar-preview avatar-preview-32">
<a href="#">
<img src="img/photo-64-2.jpg" alt="">
</a>
</div>
</div>
</section><!--.task-card-->
</div>
(大)
25%
37%完成
10
24
在使用此功能一段时间后,我提出的浮动解决方案并不令人满意,因为在某些情况下,某些卡下面有大量空间。。在回顾Bootstrap4卡之后,我发现了一个完全符合我要求的功能:“卡列”
它将您的卡片排列成三列,当屏幕尺寸较小时,会重新排列为一列
根据斯里坎特的建议,这里有一些代码可以使用。您可以根据浏览器的宽度调整
class=“col-lg-3 col-md-4 col-sm-6
以显示更多或更少的卡片。我还提供了一个宽度显示以显示像素宽度
当然,调整php循环数量以测试更多或更少的卡数
<body>
<center>Width: <span id="width"></span></center>
<br>
<div class="container">
<div class="row">
<?php
for ($x = 0; $x <= 10; $x++) {
$card = <<<EOF
<div class="col-lg-3 col-md-4 col-sm-6" style="margin-bottom:10px;">
<div class="card">
<img class="card-img-top" src="your_image.jpg" alt="Card image cap">
<div class="card-block" style="margin:5px;">
<h4 class="card-title">Card title {$x}</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<center class="link">Join</center>
</div>
</div>
</div>
EOF;
echo $card;
}
?>
</div>
</div>
<script>
$(window).resize(function() {
var viewportWidth = $(window).width();
$('#width').html(viewportWidth);
});
</script>
</body>
宽度:
$(窗口)。调整大小(函数(){
var viewportWidth=$(窗口).width();
$('#width').html(viewportWidth);
});
请共享您的代码?我尝试了这个方法,它将它们放在一个水平列中。删除“card”div的宽度以及行和列hanks mate中的标记。您在那里为我节省了大量时间。我发现的唯一问题是卡片列的顺序。如果您在3列中有15张卡片,那么页面顶部的卡片将是ng喜欢卡1、卡6和卡11。不太好!Bootstrap 4.1链接:谢谢分享Greg!我会头疼的这在Bootstrap 5中不起作用,是吗?