油滑旋轉木馬 - 集裝箱寬度不工作

我已經開始使用的一個網站，我的工作並出於某些原因，油滑的旋轉木馬插件，如果我設置了油滑旋轉木馬目標元素周圍的包裝，寬度不兌現，除非當我需要寬度只增長到父元素的大小時，我將它設置爲不是選項的像素。油滑旋轉木馬 - 集裝箱寬度不工作

我使用的引導以及在情況有所幫助。

HTML

<div class="col-md-6 col-xs-12"> 
<div class="group-filter"> 
    <span class="title">Group Filter</span> 
    <div class="group-slick-cell"> 
     <div class="group-slick-wrapper"> 
      <div class="group-slick"> 
       <div><button class="btn btn-groups">Group 1</button></div> 
       <div><button class="btn btn-groups">Group 2 more text</button></div> 
       <div><button class="btn btn-groups">Group 3</button></div> 
       <div><button class="btn btn-groups">Group 4 text</button></div> 
      </div> 
     </div> 
    </div> 
</div>

LESS：

.group-filter { 
    display: table; 
    width: 100%; 

    .title { 
     display: table-cell; 
     font-size: 16px; 
     color: @text-color; 
     padding: 0 5px; 
     vertical-align: middle; 
     width: 1%; 
    } 

    .group-slick-cell { 
     display: table-cell; 
     width: 100%; 
     height: 31px; 

     .group-slick-wrapper { 
      margin-left: 17px; 
      width: 100% 

      .btn { 
       margin: 0 5px; 
      } 
     } 
    } 
}

JS：

groupSlick.slick({ 
    infinite: true, 
    dots: false, 
    speed: 200, 
    slidesToShow: 3, 
    slidesToScroll: 1, 
    variableWidth: true, 
    centerMode: true, 
    draggable: false, 
    accessibility: false 
});

這裏的實際問題進行的jsfiddle。父容器的孩子將寬度推到20000px，這比Bootstrap應該要做的更寬。

https://jsfiddle.net/wqvth9ms/

來源

2015-07-02 ChronixPsyc

你可能想發表小提琴 - 我嘗試使用上面的代碼構建一個基本的模擬，有似乎缺少少變量，缺少標記....乾杯！ – potatopeelings

@potatopeelings我添加了一個編輯我原來的職位有一個是的jsfiddle可以清楚地看到問題與寬度。謝謝！ – ChronixPsyc

對我來說，它看起來像'display：table'問題（如果你嘗試不同的'.group-filter''width's，你會發現它從來沒有任何效果，它總是像'width：auto'一樣工作，因此20Kpx的寬度傳播一直到'col-md-6'）。你可以試試'表格的佈局：固定;'（[DEMO]（http://codepen.io/seven-phases-max/pen/pJaqdq））或一些其他的東西圍繞工作，但我個人倒建議不要使用'表/表cell'東西用傳送帶，以避免進一步的魔法陷阱（因爲通常轉盤都沒有考慮到一個表格的佈局寫入）。 –

對於有人可能會尋找一個類似的修復這一點，我創建了一個更新，原的jsfiddle低於也許能幫助你。

我將display: table-cell更改爲float: left並且還將table-layout: fixed添加到包裝元素。

https://jsfiddle.net/wqvth9ms/1/

來源

2015-07-10 09:11:56 ChronixPsyc

的標記有類group-slick-cell爲父母之一。 group-slick-cell是由滑動旋轉木馬使用的類。只要改變它的東西，你會好起來的

小提琴 - https://jsfiddle.net/y3vs6h9q/

注意，我只在標記改名類group-slick-cell1。我不確定CSS中的哪些樣式來自您的自定義設置，哪些來自滑動旋轉木馬。

來源

2015-07-03 12:12:04 potatopeelings

感謝您的迴應，但問題似乎歸結爲表和表格單元格的使用。 @ seven-phases-max給了我最接近的答案，所以一旦他把它寫成答案，我會將這個問題標記爲答案。 – ChronixPsyc

很高興它整理出來。乾杯! – potatopeelings

油滑旋轉木馬 - 集裝箱寬度不工作

回答

相關問題