ループ内でブートストラップの行と列が正しく動作しない

Question

ループ内でbootstrapの行と列のクラスを使用しようとしましたが、余分なスペースが予期しないものとして表示されます。

最初に私は次のコードを使用し、うまくいきました。

<table border="0" id="myTable" class="table" > 
     <thead border-bottom="0"> 
      <tr> 
       <th border-bottom="0" style="display: none;">Gem</th> 
       <th border-bottom="0" style="display: none;">Name</th> 
      </tr> 
     </thead> 
     <tbody> 
      @foreach(App\GemStone::where('active',TRUE)->orderBy('created_at', 'desc')->get() as $gemStone) 

      <div class="row"> 
      <tr> 
      <td style="display: none;" >{{$gemStone->created_at}}</td> 


       <td> 
         <div class="col-sm-3"> 
          <div align="center"> 
           <img alt="Gem Stone Pic" src="{{route('get_image',['id' => $gemStone->id])}} " class="img-circle img-responsive"> 
          </div> 
         </div> 
         <div class="col-sm-3"> 
          <h3><b><a href="#">{{$gemStone->type->type}}</a></b></h3> 
          @if($gemStone->shop->user->id == Auth::user()->id) 
          <a href="{{route('view_update_gem_stone',['id' => $gemStone->id])}}">[Edit]</a><br> 
          @endif 
          {{$gemStone->size->size}}<br> 
          LKR: {{$gemStone->price}}<br> 
          <div> 
           {{$gemStone->description}}<br> 
           {{$gemStone->created_at}} 
          </div> 
         </div> 
         <div class="col-sm-3"> free space of 3 cols </div> 
         <div class="col-sm-3">free space of 3 cols </div> 
       </td>   


      </tr> 
      </div> 

      @endforeach 
     </tbody> 
    </table> 

above code gave a view like this image.画像にマークされた空き領域を利用するために、私は以下のように$counter変数を使用して<tr> </tr>内部別<td> ... </td>を作成することによって、別の列を追加しようとしました。予想外のことである

 <table border="0" id="myTable" class="table" > 
     <thead border-bottom="0"> 
      <tr> 
       <th border-bottom="0" style="display: none;">Gem</th> 
       <th border-bottom="0" style="display: none;">Name</th> 
       <th border-bottom="0" style="display: none;">Name</th> 
      </tr> 
     </thead> 
     <tbody> 
      <?php $count = 0 ?> 
      @foreach(App\GemStone::where('active',TRUE)->orderBy('created_at', 'desc')->get() as $gemStone) 
      <?php $count = $count + 1 ?> 
      @if($count % 2) 
      <tr> 
       <div class="row"> 
        <td style="display: none;" >{{$gemStone->created_at}}</td> 
        @endif     
        <td> 
         <div class="col-sm-3"> 
          <div align="center"> 
           <img alt="Gem Stone Pic" src="{{route('get_image',['id' => $gemStone->id])}} " class="img-circle img-responsive"> 
          </div> 
         </div> 
         <div class="col-sm-3"> 
          <h3><b><a href="#">{{$gemStone->type->type}}</a></b></h3> 
          @if($gemStone->shop->user->id == Auth::user()->id) 
          <a href="{{route('view_update_gem_stone',['id' => $gemStone->id])}}">[Edit]</a><br> 
          @endif 
          {{$gemStone->size->size}}<br> 
          LKR: {{$gemStone->price}}<br> 
          <div> 
           {{$gemStone->description}}<br> 
           {{$gemStone->created_at}} 
          </div> 
         </div> 
        </div> 
       </td>   
       @if(!($count % 2)) 
      </div> 
     </tr> 
     @endif 
     @endforeach 
     @if($count%2) 
     <td>extra cell when odd</td> 
    </div> 
</tr> 
@endif 

Result looked like this。私は<div class='row'>と<div class = 'col-s6'>の場所をいくつかの方法で変更しようとしましたが、何も効果がありませんでした。そして私は実際にコードで間違いを見つけられませんでした。列と行のクラスを使用している間、誰かが私が間違っているところを指し示すことができれば、感謝しています。

そして、jqueryデータ型を使用してテーブルビューを取得しています。

Answer 1

追加のdiv要素を追加する代わりに、テーブル要素にブートストラップクラスを追加します。

<table> 
    <tr class="row"> 
    <td class="col-md-4">1</td> 
    <td class="col-md-4">2</td> 
    <td class="col-md-4">3</td> 
    </tr> 
</table>