CSS引導4 - 使多行的行具有相同的列

-3

我試圖讓與引導4.寬度相等列的多行排這是循環哪裏我創建這個列：CSS引導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。

來源

2017-09-15 Leff

如果添加圖像到底發生了什麼它將給更多的想法用戶。如果可能，請添加我們可以嘗試的精確值併爲您提供解決方案！ –

@Paulie_D如果事情不清楚，我已經做了一個小提琴，我認爲這很容易理解我的意思，對不起。 – Leff

@Leff使用'col-lg-12'與'row'不正確，相反，您可以在下面看到我的答案。只需閱讀bootstrap文檔。 –

嘗試用這個代碼和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>

來源

2017-09-15 07:08:00 Znaneswar

它不適合在'row'中使用'col-lg-12'。你不覺得嗎？ –

請勿在<div class="row video-section">元素內使用<div class="col-md-12">。相反，限制<div class="col-md-12">只是您<p>標籤，如：

<div class="row video-section"> 
    @if(!(count($videos) > 0)) 
    <div class="col-md-12"> 
    <p>{{ $player->first_name }} {{ $player->last_name }} has no videos yet.</p> 
    </div> 
    @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>

希望這有助於！

來源

2017-09-15 06:55:24

CSS引導4 - 使多行的行具有相同的列

回答

相關問題