Question

我正在尝试构建一个页面，其中bootstrap水平滚动任何项目而不是垂直示例：

<!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'＆amp;当仅向左/向右滚动时，'item8'可见。

然而，bootstrap将这些项目放在'item1'和＆amp; 'item5'分别为

Answer 1

您需要更改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网格解释：

http://getbootstrap.com/css/#grid

Bootstrap网格 - 水平滚动

1 个答案: