如何水平滚动行项目

Question

作为练习，我试图复制一个像Netflix这样的网站。如果您在Netflix中看到每个类别都有一行，其中的视频是水平分布的，并且大多数视频都位于屏幕“视口”之外，则您必须单击箭头按钮以将其余内容滚动到视图中。

我正在尝试通过在Bootstrap卡之间混合使用来复制此图像，作为视频“占位符”和flexbox以水平分布卡。然后，我虽然可能会使用旋转木马之类的工具，但是却找不到任何可行的方法。

关于不使用JavaScript的方法的任何建议？

谢谢

body {
	margin: 0;
	padding: 0;
}

.contain {
	display: flex;
}

.card {
	width: 200px;
	margin: 5px;
	margin-top: 5px;
	border-radius: 0;
	position: relative;
	top: 5px;
	left: 5px;
}

.card-img-top {
	border-radius: 0;
}

.card-body {
	height: 100px;
	font-size: 50%;
	text-align: center;
}

.list-group-item {
	font-size: 50%;
	border-radius: 0;
}

<div class="contain">
	<div class="card" >
		<img src="https://farm6.staticflickr.com/5089/5342837785_b579b38145_o.jpg" class="card-img-top" alt="...">
		<div class="card-body">
			<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		</div>
		<ul class="list-group list-group-flush">
		    <li class="list-group-item">Cras justo odio</li>
	    </ul>
	</div>

	<div class="card" >
		<img src="https://farm6.staticflickr.com/5089/5342837785_b579b38145_o.jpg" class="card-img-top" alt="...">
		<div class="card-body">
			<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		</div>
		<ul class="list-group list-group-flush">
		    <li class="list-group-item">Cras justo odio</li>
	    </ul>
	</div>

	<div class="card" >
		<img src="https://farm6.staticflickr.com/5089/5342837785_b579b38145_o.jpg" class="card-img-top" alt="...">
		<div class="card-body">
			<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		</div>
		<ul class="list-group list-group-flush">
		    <li class="list-group-item">Cras justo odio</li>
	    </ul>
	</div>

	<div class="card" >
		<img src="https://farm6.staticflickr.com/5089/5342837785_b579b38145_o.jpg" class="card-img-top" alt="...">
		<div class="card-body">
			<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		</div>
		<ul class="list-group list-group-flush">
		    <li class="list-group-item">Cras justo odio</li>
	    </ul>
	</div>

	<div class="card" >
		<img src="https://farm6.staticflickr.com/5089/5342837785_b579b38145_o.jpg" class="card-img-top" alt="...">
		<div class="card-body">
			<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		</div>
		<ul class="list-group list-group-flush">
		    <li class="list-group-item">Cras justo odio</li>
	    </ul>
	</div>

	<div class="card" >
		<img src="https://farm6.staticflickr.com/5089/5342837785_b579b38145_o.jpg" class="card-img-top" alt="...">
		<div class="card-body">
			<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		</div>
		<ul class="list-group list-group-flush">
		    <li class="list-group-item">Cras justo odio</li>
	    </ul>
	</div>

	<div class="card" >
		<img src="https://farm6.staticflickr.com/5089/5342837785_b579b38145_o.jpg" class="card-img-top" alt="...">
		<div class="card-body">
			<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		</div>
		<ul class="list-group list-group-flush">
		    <li class="list-group-item">Cras justo odio</li>
	    </ul>
	</div>	
</div>

Answer 1

在这里，这应该起作用。

    .contain {
      overflow: auto;
      white-space: nowrap;
      (your other CSS)
    }