Bootstrap列布局问题求助：列垂直堆叠需改为横向排列

Hey there! I see your Bootstrap columns are stacking on top of each other instead of laying out side by side—let's fix that right away.

The Root Cause #

Bootstrap's grid system relies on a container → row → column hierarchy to function properly. Your column elements (col-xl-4 etc.) aren't wrapped inside a row container, so Bootstrap can't apply the necessary flexbox/grid styles to align them horizontally.

The Solution #

Wrap all your column divs inside a <div class="row"> element. This tells Bootstrap to treat the inner columns as a horizontal grid group.

Modified Code #

Here's your updated code with the row wrapper added:

<div class="row">
  <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>
  <!-- Add more col-* elements here if you have additional cards -->
</div>

Extra Notes #

• Double-check that you've properly included Bootstrap's CSS file in your project—without it, the grid classes won't apply any styling at all.
• Your existing column classes will keep the layout responsive:
  • On extra-large screens (≥1200px): 3 columns per row (since 12/4=3)
  • On large/medium screens (≥768px): 2 columns per row (12/6=2)
  • On small screens (<768px): 1 column per row (this is intentional responsive behavior for mobile devices!)

内容的提问来源于stack exchange，提问作者user13523236