如何使用引导行类为卡片创建 3 列答案

【问题标题】：How to create 3 columns for cards using bootstrap row class如何使用引导行类为卡片创建 3 列
【发布时间】：2020-02-23 22:36:28
【问题描述】：

我正在尝试使用 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

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

【问题讨论】：

检查它，看看应用的宽度和哪个类？ col-md-4 与否

标签： php html css bootstrap-4 laravel-5.8

【解决方案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>

【讨论】：

很高兴它解决了您的问题，您可以给它投票并接受，以结束您的问题

【解决方案2】：

这是由于每个 col-md-4 div 之后的额外 div 造成的。我在 HTML 中做了一些更正。

<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 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 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>

【讨论】：