Question

我正在尝试使用Bootstrap 4创建具有相等宽度列的多行行。这是我创建此列的循环：

 <div class="row video-section">
    <div class="col-md-12">
      @if(!(count($videos) > 0))
      <p>{{ $player->first_name }} {{ $player->last_name }} has no videos yet.</p>
      @else
      @foreach($videos as $video)
      <div class="col-md-3 profile-video-box">
        <a href="/player/video/{{ $video->uid }}/{{ $video->player->fullName }}">
          <div class="card bg-dark text-white">
            <img src="{{ $video->getThumbnail() }}" class="card-img"/>
            <div class="card-img-overlay">
              <div class="play-icon-wrapper">
                <i class="ion-ios-play"></i>
              </div>
              <div class="card-content">
                <h5 class="card-title">{{ $video->title != '' ?  $video->title : 'Untitled' }}
                </h5>
                <p class="card-text">{{ $video->created_at->diffForHumans() }}
                </p>
              </div>
            </div>
          </div>
        </a>
      </div>
      @endforeach
    </div>
  </div>

但是，然后每列占据整行，因为它获得了正确的边距以占据行中的其余空间。如何解决这个问题并创建多行行？

更新

这是fiddle。

Answer 1

尝试使用此代码和fiddle

        <div class="row video-section ">
        <div class="container">
            <div class="row">
                <div class="col-md-3 profile-video-box">
                    123
                </div>
                <div class="col-md-3 profile-video-box">
                    456
                </div>
                <div class="col-md-3 profile-video-box">
                    759
                </div>
            </div>
        </div>
    </div>

Answer 2

请勿在{{1}}元素中使用<div class="col-md-12">。而是将<div class="row video-section">仅限于您的<div class="col-md-12">标记，例如：

<p>

希望这有帮助！

CSS Bootstrap 4 - 使多行行具有相等的列

2 个答案: