为什么div行给我列？

Question

我要去找电网。连续3-4张牌。我使用的是row div，但您使用的是数据作为列。为什么？

        <div class="row">
            <div class="col-md-4">
                <div class="d-flex"></div>
                <div class="separator-solid"></div>
                <h3 class="card-title">
                           {{$item->quantity}}<br>
                           {{$item->price}}<br>
                           {{$item->dish->name}}<br>
                           <hr>
                </h3>
            </div>
        </div>

在这里输入图像描述

Answer 1

您似乎将每一列都包装在自己的行中，因此它们都会在彼此的下面。尝试将两列放置在同一行元素中。像这样的事情也许能解决你的问题

<div class="row">
 <div class="col-md-4">
            <div class="d-flex"></div>
            <div class="separator-solid"></div>
            <h3 class="card-title">
                       {{$item->quantity}}<br>
                       {{$item->price}}<br>
                       {{$item->dish->name}}<br>
                       <hr>
            </h3>
        </div>
 <div class="col-md-4">
            <div class="d-flex"></div>
            <div class="separator-solid"></div>
            <h3 class="card-title">
                       {{$item->quantity}}<br>
                       {{$item->price}}<br>
                       {{$item->dish->name}}<br>
                       <hr>
            </h3>
        </div>
</div>

编辑：

如果要使用for/foreach循环，代码将如下所示：

<div class="row">
@foreach(var item in data){
<div class="col-md-4">
  <div class="d-flex"></div>
  <div class="separator-solid"></div>
  <h3 class="card-title">
   @item.Quantity<br>
    @item.Price<br>
    @item.Name<br>
    <hr>
  </h3>
</div>
}
</div>