要创建垂直列表，我们可以使用<ul>和<li>元素以及相应的Bootstrap类。例如，下面的示例代码展示了如何创建一个简单的垂直列表：

<ul class="list-unstyled">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

上述代码中，我们使用了list-unstyled类来移除默认的列表样式。如果希望有带样式的列表，可以使用list-style类，例如：

<ul class="list-style">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

卡片组件

<

div> 和相关类

除了列表组件，Bootstrap 3还提供了卡片组件来创建更丰富和具有多种样式的垂直列表。卡片组件具有具体的样式，并且允许在每个卡片中添加更多的内容。

下面是一个使用卡片组件的示例代码：

<div class="card">
  <div class="card-body">
&lt;h5 class="card-title"&gt;标题&lt;/h5&gt;
&lt;p class="card-text"&gt;卡片文本&lt;/p&gt;
</div>
</div>

在上述示例中，我们使用了card类来创建一个具有基本样式的卡片，使用card-body类来定义卡片正文内容，使用card-title和card-text类来分别定义标题和文本。

响应式布局

Bootstrap 3还提供了响应式布局，这意味着我们可以根据屏幕大小自动调整列表的布局样式。通过使用Bootstrap提供的网格系统，我们可以创建出适应不同设备的垂直列表。

<div class="row">
  <div class="col-md-6">
&lt;div class="card"&gt;
  &lt;!-- 卡片内容 --&gt;
&lt;/div&gt;
</div>
  <div class="col-md-6">
&lt;div class="card"&gt;
  &lt;!-- 卡片内容 --&gt;
&lt;/div&gt;
</div>
</div>

上述代码中，我们使用了row类来创建一个网格行，然后使用col-md-6类把容器划分为两列。每个列中都包含一个卡片组件。

注意，col-md-6中的md表示中等设备，可以根据需要调整为其他设备尺寸(如sm、lg)。

总结

通过使用Bootstrap 3的相关类和组件，我们可以轻松创建出漂亮且响应式的垂直列表或”卡”布局。无论是使用列表组件还是卡片组件，都可以通过添加样式类来定制其外观和行为。同时，通过使用响应式布局，我们可以适应不同设备上的展示效果。

希望本文对大家在Rails 3.2和Bootstrap3中创建垂直列表布局有所帮助。尽情发挥创意，打造出符合自己需求的独特垂直列表布局！