twitter-bootstrap 如何在引导程序 4 中包装（浮动）卡片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38320584/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to wrap (float) cards in bootstrap 4
提问by Greg Gum
I am using bootstrap 4 beta.
我正在使用引导程序 4 测试版。
I have a list of cards. I want them to be of fixed width, but the height will be variable depending on the content.
我有一张卡片清单。我希望它们具有固定宽度，但高度将根据内容而变化。
The number of cards can be from 1 to n.
卡的数量可以从 1 到 n。
The effect I want is for the cards to be be laid out from left to right until screen space runs out, then wrap to next line.
我想要的效果是卡片从左到右排列，直到屏幕空间用完，然后换行到下一行。
I have tried all the different options listed on the bootstrap 4 example page for cards, but they don't seem to wrap.
我已经尝试了 bootstrap 4 示例页面上列出的所有不同选项卡，但它们似乎没有换行。
How can I achieve this?
我怎样才能做到这一点？
The below example shows them 3 across, with a lot of space between them.
下面的例子显示了它们 3 个，它们之间有很多空间。
<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>
回答by Greg Gum
After working with this for some time, the floating solution I came up with was unsatisfactory as in some cases, there was a large amount of space below some cards.. After reviewing bootstrap 4 cards, I found a feature that does exactly what I wanted it to: "card-columns"
在使用了一段时间后，我想出的浮动解决方案并不令人满意，因为在某些情况下，某些卡片下方有大量空间。在查看 bootstrap 4 卡片后，我发现了一个功能正是我想要的它是：“卡片列”
It lines up your cards into three columns, and re-arranges to one column when the screen size is small.
它将您的卡片排列成三列，并在屏幕尺寸较小时重新排列为一列。
回答by Greg Gum
I came up with a floating-card class that works:
我想出了一个有效的浮动卡类：
<style>
.floating-card {
float: left;
margin: 5px;
max-width: 300px;
}
</style>
Example usage:
用法示例：
<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>
回答by Srikanth Reddy
Here the solution... use bootstrap row and col's to acheive this, please follow below code.
这里的解决方案......使用引导行和列来实现这一点，请按照下面的代码。
<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>
回答by HDer
Here's some code you can play with, based on Srikanth's suggestion. You can adjust the class="col-lg-3 col-md-4 col-sm-6to have more or less cards display based on the width of your browser. I've also included a width display to show the pixels width.
根据 Srikanth 的建议，这里有一些您可以使用的代码。您可以class="col-lg-3 col-md-4 col-sm-6根据浏览器的宽度调整显示更多或更少的卡片。我还包括一个宽度显示来显示像素宽度。
Of course adjust the php loop quantity to test more or less number of cards.
当然调整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>
