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. 为了使用图片中标记的可用空间，我尝试使用<td> ... </td>变量在<tr> </tr>内创建另一个$counter，添加另一列。如下所示。 / p>

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

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

1 个答案: