php - 如何使用引导行类为卡片创建 3 列
问题描述
我正在尝试使用 bootstrap 4 行类在三个不同的列中显示我的页面的内容(显示在卡片中)。我该怎么做?
我正在使用 Laravel 5.8 和 bootstrap 4。其他引导功能(如轮播和导航栏)工作正常。
主刀片文件-views/layout/app.blade.php 中的内容代码如下所示;
<div class="container-fluid">
@yield('content')
</div>
然后对于我想要 layout-views/pages/secondpage.blade.php 的页面是;
@extends('layout.app')
@section('content')
<div class="col-12 text-center">
<h2> Page caption</h2>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="card border-white">
<div class="card-header">Heading 1</div>
<div class="card-body">
<p class="card-text">Some quick example text to build
on the card
title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="card border-white">
<div class="card-header">Heading 2</div>
<div class="card-body">
<p class="card-text">Some quick example text to build
on the card
title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="card border-white">
<div class="card-header">Heading 3</div>
<div class="card-body">
<p class="card-text">Some quick example text to build
on the card
title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
@endsection
我希望看到卡片排列在三个不同的列中,但它们都在一个列中。
解决方案
您有一个额外的 div 关闭标签,这三个都是您将所有内容放在一列中的原因
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="card border-white">
<div class="card-header">Heading 1</div>
<div class="card-body">
<p class="card-text">Some quick example text to build
on the card
title and make up the bulk of the card's content.</p>
</div>
</div>
<!--</div>-->
</div>
<div class="col-sm-6 col-md-4">
<div class="card border-white">
<div class="card-header">Heading 2</div>
<div class="card-body">
<p class="card-text">Some quick example text to build
on the card
title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<!--</div>-->
<div class="col-sm-6 col-md-4">
<div class="card border-white">
<div class="card-header">Heading 3</div>
<div class="card-body">
<p class="card-text">Some quick example text to build
on the card
title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<!--</div>-->
</div>
推荐阅读
- cluster-analysis - 如何确定 R 中分类数据的聚类方法?
- javascript - 如何在 Svelte 中执行 window.scrollTo(0,0)
- android-espresso - InteractionBuilder 中没有匹配器。如何使用其类指定 Kakao 视图 UI 元素?
- python - 将使用 Brython 3.7.5 的 Python 标准发行版库导入 Angular8 项目
- c# - 根据屏幕上的另一个 Picker 设置 Picker 数据
- c# - 打开编辑和打开受密码保护的 PowerPoint 演示文稿
- knex.js - 尽管检查存在重复 PRIMARY KEY 条目
- c - for循环中哪个变量的新用户输入
- javascript - Angular Owl 日期时间选择器标签和按钮未本地化
- node.js - Node.JS & Mongo.DB - 返回集合的内容