Vue框架中，一个常见的布局方式就是使用row。row是Bootstrap框架中的一种网格系统，Vue中也可以使用。在Vue中，row用来构建水平网格系统，它可以将一行分成12个列，使用col-*类来控制每个列的宽度。

在Vue中使用row的时候需要先引入Bootstrap的CSS样式。在Vue的入口文件中，可以通过import语句引入Bootstrap的CSS文件：

import 'bootstrap/dist/css/bootstrap.css';

引入了Bootstrap的CSS文件之后，就可以在Vue中使用row了。首先要在template标签中使用一个div来包裹row。row的类名可以使用“row”或者“container”。

<div class="row">
……
</div>

接着，在row中可以添加多个col-*元素，每个col-*元素会被分配一定的宽度，这样可以将一行分成几个区域。col-*元素中的“*”表示该元素在网格系统中占用的列数，最大为12。例如，col-4表示该元素占用3个列。

<div class="row">
<div class="col-4">
……
</div>
<div class="col-8">
……
</div>
</div>

除了col-*之外，还可以添加offset-*类来设置列的偏移量。例如，offset-2表示该列在左边空出2个列的宽度。可以将col-*和offset-*同时使用，来实现更复杂的布局。

<div class="row">
<div class="col-4 offset-2">
……
</div>
<div class="col-6">
……
</div>
</div>

在使用row的时候，还需要注意几个细节。首先，row本身没有固定的宽度，它会根据父元素的宽度来自适应。因此，在使用row的时候，可以在其父元素外层包裹一层容器，来控制row的宽度。

<div class="container">
<div class="row">
……
</div>
</div>

其次，在row中添加col-*元素的时候，一定要保证它们的宽度加起来不超过12。否则，需要使用更高级的布局方式。

在Vue中使用row可以快速构建出网格系统，实现复杂的布局。通过col-*和offset-*的组合，可以实现各种不同的布局要求。