gpt4 book ai didi

php - 如何使用引导行类为卡片创建 3 列

转载 作者:行者123 更新时间:2023-11-27 23:09:32 28 4
gpt4 key购买 nike

我正在尝试使用 bootstrap 4 行类在三个不同的列中显示我的页面的内容(在卡片中显示)。我该怎么做?

我正在使用 Laravel 5.8 和 bootstrap 4。其他 bootstrap 功能(如轮播和导航栏)工作正常。

主 Blade 文件-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>

关于php - 如何使用引导行类为卡片创建 3 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58594702/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com