我正在尝试构建一个页面，其中引导程序会水平滚动任何项目，而不是垂直滚动示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" style="background-color:red;">item1</div>
<div class="col-sm-4" style="background-color:blue;">item2</div>
<div class="col-sm-4" style="background-color:green;">item3</div>
<div class="col-sm-4" style="background-color:yellow;">item4</div>
</div>
<div class="row">
<div class="col-sm-4" style="background-color:red;">item5</div>
<div class="col-sm-4" style="background-color:blue;">item6</div>
<div class="col-sm-4" style="background-color:green;">item7</div>
<div class="col-sm-4" style="background-color:yellow;">item8</div>
</div>
</div>
</body>
</html>
在上面的示例中，我尝试仅向左/向右滚动时显示“ item4”和“ item8”。
但是引导程序将这些项目分别放置在“ item1”和“ item5”下方
最佳答案
您需要更改div的编号。
Bootstrap的网格大小为12，因此col-sm-4将每行最多渲染3个（4 + 4 + 4 = 12）。
您将需要使用col-sm-3，该容器具有25％的容器，并允许每行显示4（3 + 3 + 3 + 3 = 12）。
在简历中，尝试以下操作：
<div class="row">
<div class="col-sm-3" style="background-color:red;">item1</div>
<div class="col-sm-3" style="background-color:blue;">item2</div>
<div class="col-sm-3" style="background-color:green;">item3</div>
<div class="col-sm-3" style="background-color:yellow;">item4</div>
</div>
<div class="row">
<div class="col-sm-3" style="background-color:red;">item5</div>
<div class="col-sm-3" style="background-color:blue;">item6</div>
<div class="col-sm-3" style="background-color:green;">item7</div>
<div class="col-sm-3" style="background-color:yellow;">item8</div>
</div>
这是Bootstrap Grid的说明：
http://getbootstrap.com/css/#grid
关于html - 引导网格-水平滚动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28094271/