Q&A
tableだとcolクラス使う意味ないのでは。何を参考にされたのでしょう。Bootstrapにも当然ドキュメントがあるわけで。
Laravel5.7系でbootstrapを使用して、１２個分のカラム を横一列に表示させたいです。
アドバイスを頂けたら幸いです。
現在の表示は画像の通りです。
理想としては以下画像のようにカラムが横一列で表示です。
@extends('layouts.app') @section('content') <div class="container"> @if (Route::has('login')) @auth <h1 class="h2">ChatNode</h1> @else <a href="{{ route('login') }}">Login</a> @if (Route::has('register')) <a href="{{ route('register') }}">Register</a> @endif @endauth @endif </div> <div class="container"> <div class="text-right mb-3"> <a class="btn btn-primary" href="{{ action('ChatNodeController@create')}}">作成</a> </div> <table class="table"> <thead> <tr class="row"> <th class="col">ノードID</th> <th class="col">プラットフォーム</th> <th class="col">タイプ</th> <th class="col">タイトル</th> <th class="col">イメージ</th> <th class="col">ボタン１</th> <th class="col">ボタン２</th> <th class="col">ボタン３</th> <th class="col">クリエイティブタイプ</th> </tr> </thead> <tbody> @foreach ($data as $datum) <tr class="row"> <td> {{$datum->id}} </td> <td> {{$datum->platform}} </td> <td> {{$datum->type}} </td> <td> {{$datum->title}} </td> <td> {{$datum->image}} </td> <td> {{$datum->button_1}} </td> <td> {{$datum->button_2}} </td> <td> {{$datum->button_3}} </td> <td> {{$datum->creative_type}} </td> <td class="col-3"> <div class="btn-group"> <a class="btn btn-success" href="{{ action('ChatNodeController@edit', ['id'=>$datum->id])}}">編集</a> <a class="btn btn-info" href="{{ action('ChatNodeController@show', ['id'=>$datum->id])}}">詳細</a> </div> </td> </tr> @endforeach </tbody> </table> </div> @endsection コード
あとレイアウトだけの話でしたらLaravel感はださないほうが良いかと。
先にモックで調整した方が効率的です。
回答2件
0
rowクラスの子要素にcol-1クラスを付与しましょう
html
1<div class="row"> 2 <div class="col-1"></div> 3 <div class="col-1"></div> 4 <div class="col-1"></div> 5 <div class="col-1"></div> 6 <div class="col-1"></div> 7 <div class="col-1"></div> 8 <div class="col-1"></div> 9 <div class="col-1"></div> 10 <div class="col-1"></div> 11 <div class="col-1"></div> 12 <div class="col-1"></div> 13 <div class="col-1"></div> 14</div>
Bootstrapのグリッドシステムは主題にある通り要素が12分割されるのでcol-hogeの部分には12分のhogeといった意味で数字を記載しましょう
投稿2020/01/16 00:45
総合スコア289
0
自己解決
<td>タグでまとめられる項目はまとめることで１２カラム分のスペースに表示することができました。
また、classからbladeの機能であるscopeに変更。
<table class="table"> <thead> <tr scope="row"> <th scope="col-1">#</th> <th scope="col-1">ユーザーID</th> <th scope="col-1">商品名<br>金額<br>サイズ</th> <th scope="col-1">決算方法</th> <th scope="col-1">購入時間</th> <th scope="col-1">流入</th> <th scope="col-1">購入歴</th> <th scope="col-1">購入平均単価</th> <th scope="col-1">前回商品<br>価格<br>購入日</th> </tr> </thead> <tbody> @foreach ($product_order as $product_orders) <tr scope="row"> <td scope="col-1"> {{$product_orders->id}} </td> <td scope="col-1"> {{$product_orders->customer_id}} </td> <td scope="col-1"> {{$product_orders->item_name}}<br> {{$product_orders->price}}円<br> {{$product_orders->product_size}}ml </td> <td scope="col-1"> {{$product_orders->payment}} </td> <td scope="col-1"> {{$product_orders->purchase_time->format('y/m/d H:i')}} </td> <td scope="col-1"> {{$product_orders->type_bf}} </td> <td scope="col-1"> {{$product_orders->purchase_history}} </td> <td scope="col-1"> {{$product_orders->avg_price}}円 </td> <td scope="col-1"> {{$product_orders->last_item_name}}<br> {{$product_orders->last_price}}円<br> {{$product_orders->last_date->format('y/m/d H:i')}} </td> コード
投稿2020/02/11 03:04
総合スコア131
修正依頼欄で指摘されていますが、tableタグはそもそも横一列で表示されます。
また、gridシステムはクラスに指定するものです。提示のコードではscope属性に`col-1`を指定しています。これは全く意味のない指定になっています。
繰り返しますが、横一列に表示したいだけなら、tableタグの記載のみで(classを指定しなくても)済みます。
あなたの回答
tips
プレビュー
