bugfix> html > 投稿

ブートストラップの列に問題があります。現在、列が上下に垂直に表示されています。

左に表示する必要があります

コード:

<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
    <div class="widget widget-card-two">
        <div class="widget-content">
            <div class="media">
                <div class="w-img">
                    <img src="assets/img/90x90.jpg" alt="avatar">
                </div>
                <div class="media-body">
                    <h6>{{ $tracking->order->shipping_address }}</h6>
                    <p class="meta-date-time">{{ $tracking->order->user->name }}</p>
                </div>
            </div>
            <div class="card-bottom-section">
                <h5>{{ $tracking->order->shipping_method }}</h5>
                <div  class="img-group">
                   <a style="text-decoration: none; background-color: #ffffff;" href="https://api.whatsapp.com/send?phone={{$tracking->order->user->telefono}}&text=Hola" target="_blank">  <img src="https://i.imgur.com/C5L19Q8.png" alt="avatar"> </a>
      
                </div> 
                <a href="{{route('order-show',$tracking->order)}}" class="btn">Ver Pedido N° {{ $tracking->order->id }}</a>
            </div>
        </div>
    </div>
</div>

plsを助けます

回答 1 件
  • 追加するだけです row 以下に示すように、クラス:

    <div class="container">
      <div class="row">
        <div class="col-sm">
          One of three columns
        </div>
        <div class="col-sm">
          One of three columns
        </div>
        <div class="col-sm">
          One of three columns
        </div>
      </div>
    </div>
    
    

    詳細については、ドキュメントを参照してください:https://getbootstrap.com/docs/4.0/layout/grid/

あなたの答え