Как создать 3 столбца для карт, используя класс строки начальной загрузки

Question

Я пытаюсь отобразить содержимое (которое представлено в карточках) моей страницы в трех разных столбцах, используя класс строки начальной загрузки 4. Как мне это сделать?

Я использую Laravel 5.8 и загрузчик 4. Другие функции начальной загрузки, такие как карусель и навигационная панель, работают нормально.

Код для содержимого в главном блейд-файле view / 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 после каждого col-md-4 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>

Answer 2

У вас есть дополнительный тег 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>