2017-11-11 220 views
0

我爲我的laravel項目使用引導程序4,但由於某種原因,它不能正常工作,我試圖設置一個類似這樣的帖子: 一列爲個人資料圖片col-md-1和11列是col-md-11後的其餘但由於某些原因,它原來是這樣enter image description hereLaravel - Bootstrap 4不能正常工作

取而代之的是:enter image description here

這怎麼可能?我有同樣的問題與另一頁,我的設置是這樣的

<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> 

出於某種原因,最後col-md-3在BUTTOM應該在網頁的BUTTOM旁邊col-md-9而是它的顯示。我的引導程序4的實現是非常有用的,我可以注意到按鈕的顏色。但是,怎麼注意這個?提前致謝!

PS:這裏是元素的GIF https://imgur.com/a/2FP67

回答

0

很難說究竟是怎麼回事,沒有看到,可能是替代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