BootStrap：行不能在一行包含两列

Posted 2023-03-21

【中文标题】BootStrap：行不能在一行包含两列

【英文标题】：BootStrap : row don't work to contain two column at one row

【发布时间】：2021-11-19 02:19:51

【问题描述】：

我有这个 laravel 页面，其中包含带有媒体打印的引导页面，我的行包含两列我想在同一行显示两列：

@extends('layouts.app')
@section('content')
        <div class="container" dir="rtl">
                <div class="flex-row d-flex justify-content-around">
                    -- First Class --
                    <div class="col-6">
                        <div class="d-flex justify-content-around py-2 text-white text-dark">
                            <div>وانا ئێكێ</div>
                            <div>دەمژمێر</div>
                            <div>08:30</div>
                        </div>
                        <div class="d-flex justify-content-around py-2 ">
                        <table class="w-100 table  table-bordered table-striped">
                            <thead class="thead-dark ">
                                <tr class="text-center">
                                  <th class="" scope="col">#</th>
                                  <th scope="col">قوتابی</th>
                                  <th scope="col">مولەت</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $counter=0;
                                @endphp
                                @foreach ($absences as $item)
                                    @if ($item->time=="08:30")
                                        <tr>
                                            <td>$counter</td>
                                            <td class="text-right pr-2">$item->stud</td>
                                            <td class="text-center">$vacation</td>
                                        </tr>
                                        
                                    @endif
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="col-6">
                        <div class="d-flex justify-content-around py-2 text-white text-dark">
                            <div>وانا ئێكێ</div>
                            <div>دەمژمێر</div>
                            <div>09:30</div>
                        </div>
                        <div class="d-flex justify-content-around py-2 ">
                        <table class="w-100 table  table-bordered border-black ">
                            <thead class="thead-dark ">
                                <tr class="text-center">
                                  <th class="" scope="col">#</th>
                                  <th scope="col">قوتابی</th>
                                  <th scope="col">مولەت</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $counter=0;
                                @endphp
                                @foreach ($absences as $item)
                                    @if ($item->time=="09:30")
                                        <tr>
                                            <td>$counter</td>
                                            <td class="text-right pr-2">$item->stud</td>
                                            <td class="text-center">$vacation</td>
                                        </tr>
                                        
                                    @endif
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                
            </page>
        </div>        
    @else
       <div class="m-auto">No Data</div> 
    @endif
    
@endsection

如下图所示： 如图所示，两列没有在同一行预览 我该如何解决？ 我使用了 row class 和 d-flex 但不起作用

【参考方案1】：

代码有错误，我删除了这一行，现在可以了：

<div class="d-flex justify-content-around py-2 ">