如何使用引导程序行类为卡创建3列

Question

我正在尝试使用bootstrap 4行类在三个不同的列中显示页面的内容（在卡片中显示）。我该怎么办？

我正在使用Laravel 5.8和bootstrap4。其他bootstrap功能，例如轮播和导航栏都正常工作。

[主刀片文件file-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

我希望看到卡片分为三个不同的列，但它们都在同一列中。

Answer 1

您对所有三个对象都有一个额外的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>