在引導

我想創建的，其中3張卡在一個時間顯示和其他的都是水平滾動，像這樣的卡水平列表的卡水平滾動列表用CSS很容易完成，但我想用Bootstrap來做到這一點。 Bootstrap 4 ships with cards通過材料設計推廣他們是那麼容易，因爲在引導別的使用。對於這個例子而不是卡片，它也可以是常規的divs。在引導

我與創造的，其中他們的3一次顯示X卡（或div的），其他的可滾動容器掙扎的事情溢出到右側，是滾動的。我不知道如何使用引導給卡（或div的）的寬度，使3一次顯示和其他的人在他們旁邊趴在右邊。

來源

2016-03-14 Lukas

您可以使用bootstrap-horizon

安裝

包括自舉horizon.css bootstrap.css後

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css"> 
<link rel="stylesheet" href="/bower_components/bootstrap-horizon/bootstrap-horizon.css">

的.row-horizon類添加到需要水平滾動.rows。爲了提高對UX，自舉視距覆蓋自舉的.col-*-*類以使基線寬度的90％，而不是100％，其允許將被顯示的最後一列的一小部分。

<div class="row row-horizon"> 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
    ... 
    </div> 
</div>

例

來源

2016-03-14 20:40:22

謝謝！我不接受你的答案，因爲我找到了一種方法在Bootstrap 4中「本地」地完成，我將在後面發表。親愛的谷歌，他們很惱火，我從來沒有發佈我的解決方案：它的想法是把卡片套入一個hor。可滾動的容器並縮放卡座，以便顯示正確數量的卡片。 – Lukas

@Lukas你好！我和你有同樣的問題，你可以發佈我們的本地解決方案嗎？如果您仍然擁有它，某些代碼將非常棒 –

@VivienAdnot使用新的Flexbox實用程序[在我的答案中解釋]（http://stackoverflow.com/a/42117768/171456） – ZimSystem

現在自舉4阿爾法6使用Flexbox的，這個水平滾動佈局要容易得多。你可以簡單地使用flex-row和flex-nowrap：

<div class="container-fluid"> 
    <div class="row flex-row flex-nowrap"> 
     <div class="col-3"> 
      <div class="card card-block">Card</div> 
     </div> 
     <div class="col-3"> 
      <div class="card card-block">Card</div> 
     </div> 
     <div class="col-3"> 
      <div class="card card-block">Card</div> 
     </div> 
     <div class="col-3"> 
      <div class="card card-block">Card</div> 
     </div> 
     ... 
    </div> 
</div>

https://www.codeply.com/go/GoFQqQAFhN

更新2018引導4.0.0

以上方法仍然有效，也可以在的容器使用Flexbox的utils的卡：https://www.codeply.com/go/PF4APyGj7F

來源

2017-02-08 15:54:34 ZimSystem

代碼鏈接不會顯示您的示例...如果有必要進行更改，您是否可以更新bootstrap 4-beta2？ – IlGala

我更新了鏈接。測試版2應該是相同的。 – ZimSystem

回答

相關問題