Laravel - Bootstrap 4正しく動作しない

Question

私のlaravelプロジェクトにはブートストラップ4が使用されていますが、何らかの理由で正しく動作しない場合は、次のようなポストを設定しようとしています： col-md-1そしてcol-md-11あるポストの残りの11列は、しかし、いくつかの理由では、これに代えて、この

のように判明：

どのようにこれは可能ですか？私は私のセットアップが湖底で最後col-md-3は次col-md-9に表示する代わりに、そのページの湖底にすることになっているいくつかの理由について、この

<div class="container first-container"> 
    <div class="row" id="showEffect"> 
     <div class="col-md-9 col-sm-12" style="border-right: 1px solid #f1f0f0"> 
      <h2 class="fw-3">Alle vragen</h2><br> 
      <div class="row"> 
       @foreach($posts as $post) 
        <div class="card" style="border: 0; border-bottom: 1px solid #f1f0f0"> 
         <div class="card-body"> 
          <div class="col-md-1 col-sm-1"> 
           <a href=""> 
            <img src="{!! asset('images/placeholder.png') !!}" class="rounded-circle" width="50"> 
           </a> 
          </div> 
          <div class="col-md-11 col-sm-11"> 
           <a href="{{ $post->path() }}"> 
            <h5 class="mb-0">{{ $post->title }}</h5> 
           </a> 
           <small> 
            <span>Kanaal</span> • {{ $post->created_at->diffForHumans() }} door 
            <a href=""> 
             <span>{{ $post->user->username }}</span> 
            </a> 
           </small> 
           <p class="mb-0 mt-2">{{ $post->text }}</p> 
          </div> 
         </div> 
        </div> 
       @endforeach 
      </div> 
     </div> 
     <div class="col-md-3"> 
      test 
     </div> 

    </div> 


</div> 

のように見え、他のページと同じ問題を持っています。私のブートストラップ4の実装はうまく動作している、私はボタンの色で気づくことができます。しかし、これをうなずいているのは何ですか？前もって感謝します！

PS：ここでは要素のGIFがあるhttps://imgur.com/a/2FP67

Answer 1

正確な場所であってもよく、CSSルールを見ずに何が起こっているかと言うが、の親に「行」クラスを追加してみてくださいするのは難しいです"COL-MD-1" および "COL-MD-11"：

<div class="row card-body"> 
    <div class="col-md-1 col-sm-1"> 
     ... 
    </div> 
    <div class="col-md-11 col-sm-11"> 
     ... 
    </div> 
</div> 

は、ドキュメントhere

を参照してください。