무제한으로 항목을 가로로 표시하는 방법은 무엇입니까?

Question

내보기 중 하나에 항목 목록이 있습니다. 난 단지 6 개의 항목을 맞게 수 있으며,이처럼 놓인 :

내가 각각에 대해 class="col-md-2"을 사용했다.

---

6 이상인 경우 다른 행으로 이동하면됩니다. 나는 그것을 원하지 않는다. 여기에서 볼 수 있습니다.

---

이제 if 목록 6ormore 항목, 그들이 수평

는 사용자가

더 있다는 것을 알 수 있도록 큰 >을 보여

• 목록이 있습니다
• 은 m에 2 도트를 보여줍니다. iddle

Edit 이것은 내가 지금까지 무엇을 가지고 있습니다. Larval 4를 사용 했으므로이 구문은 HTML/Blade입니다.

@foreach (MarketingMaterialCategory::all() as $mmc) 

    <h2><i class="fa fa-file-image-o color lighter"></i>&nbsp; {{{ $mmc->name or '' }}} &nbsp;<small> </small></h2> 

    <div class="row"> 

    @foreach (MarketingMaterial::where('marketing_materials_category_id','=', $mmc->id)->get() as $marketing_material) 

    <div class="col-md-2" > 
     <!-- Shopping items --> 
     <div class="shopping-item"> 
      <!-- Image --> 
      <div class="col-sm-12 imgbox" > 
       <!-- <span class="col-sm-6"></span> --> 
       <a href="#"><img class="col-sm-12 pull-right" width="200" src="/marketing_materials/{{$marketing_material->id}}/download/thumb_path" alt="" /></a> 
      </div> 

      <!-- Shopping item name/Heading --> 
      <h6><a href="#">{{{ $marketing_material->title or '' }}}</a><span class="color pull-right">{{ FileHelper::formatBytes($marketing_material->media_size,0) }}</span></h6> 

      <!-- Shopping item hover block & link --> 
      <div class="item-hover bg-color hidden-xs"> 
       <a href="#">Download</a> 
      </div> 
     </div> 
    </div> 

    @endforeach 

    </div> 
    <hr> 

@endforeach 

이 문제를 해결하는 방법을 알려 줄 사람이 있습니까?

Answer 1

부트 스트랩은 이러한 종류의 스크롤을 지원하지 않습니다. 그러나 나는이 자바 스크립트 라이브러리를 과거에 사용 했으므로 정확히 원하는 것을 수행합니다. Slick.js

매우 유연하며 페이지의 모든 내용을 표시 할 수없는 경우에만 스크롤 옵션을 표시합니다 .

비록 당신이 그것을 사용한다면, 부트 스트랩 col-md-2 클래스를 사용하지 말고 단지 수동 너비를 설정하십시오.