时间戳

首页 > 解决方案 > 在卡片或盒子上显示结果

css - 在卡片或盒子上显示结果

问题描述

我怎样才能显示这个结果：

Your result:
var1: 1,4,3
var2: 2,5,6

变成这样：

Your result:
 ______________
|var1          |
|--------------|
|1 4 3         |
|______________|

其他变量类似，如 var2 等。这是我的代码，它允许结果显示为第一个变体。

<div class="section-heading text-center">
                    <h2>Your result:</h2>          
                    @foreach ($variables_json as $variable => $value)
                    <h5>{{ $variable }}: {{ implode(", ", $value) }}</h5>
                    @endforeach        
                    <form method="post" id="form" action="{{route('randomizeVariables.store')}}" name="form" 
                    class="form text-center" data-response-message-animation="slide-in-left" 
                    novalidate>
                        @csrf
                        <button type="submit" class="btn btn-lg btn-alternate align-center">Try again</button>                        
                        <a href="/randomizeValue" id="destroySession" type="submit" 
                        class="btn btn-lg btn-alternate align-center">Return</a>    
                    </form>
                </div>

标签： csslaravellaravel-blade

解决方案

如果您始终要显示相同数量的值，请使用包含单元格和行的表格：

<table>
  <tr>
    <th>Name
    <th>Val 1
    <th>Val 2
  </tr>
    @foreach ($variables_json as $variable => $values)
       <tr>
       <td>{{ $variable }}</td>
       @foreach($values as $val)
           <td>{{$val}}</td>
       @endforeach
      </tr>
    @endforeach  
</table>

如果值计数是随机的，您可以在 foreach 中利用 Laravel 的$loop值，中间有空格，使用任何类型的<div>类将名称与值分开：

    @foreach ($variables_json as $variable => $values)
       <div class='col-md-4'>{{ $variable }}</div>
       <div class='col-md-8'>
       @foreach($values as $val)
           {{$val}}
           {!! $loop->last? "": "  &nbsp; " !!}
       @endforeach
      </div>
  @endforeach

我重命名为$value，$values因为它看起来像一个数组。可能使它更容易阅读并知道需要对那组值进行内爆或循环。

推荐阅读