Bootstrap 行和列在每个循环内部无法正常工作

Question

我尝试在每个循环中使用引导行和列类，并且一些额外的空格显示为意外。

首先，我使用了以下代码，效果很好。

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

上面的代码给出了一个像这个图像的视图。为了使用图中标记的可用空间，我尝试通过创建另一个<td> ... </td>内部<tr> </tr>using$counter变量来添加另一列，如下所示。

        <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

结果看起来像这样，这是出乎意料的。我试图改变的地方<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>