引导行和列在每个循环的内部不能正常工作。

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>

为了使用图片中标记的空闲空间，我尝试添加另一列，方法是使用上面的代码给出了一个类似于这个图像的视图。变量在<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

结果如下，这是意想不到的。我试着用几种方式改变<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>