基本上,我想要一张纸牌/瓷砖布局。我尝试了Bootstrap 4的Card-Columns示例,结果如下:
<main role="main" class="container-fluid free">
<div class="card-columns">
<div class="card" style="width:60%;">
<div class="card-body">
<h5 class="card-title">Test1</h5>
<p class="card-text">test</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Test2</h5>
</div>
</div>
</div>
</main><!-- /.container -->
现在我要删除页面上两张卡之间的空间。通过卡在Bootstrap中有可能吗?我可以使用自定义卡片宽度的图块布局非常重要。
以下是小提琴的链接:JSFiddle 预先感谢。
答案 0 :(得分:1)
尝试一下
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<main role="main" class="container-fluid free">
<div class="card-columns row">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Test1</h5>
<p class="card-text">test</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Test2</h5>
</div>
</div>
</div>
</div>
</main>
<!-- /.container -->