引导文本对齐

Question

我在网站上的文字是这样的：

Username: text
money: text
level: 5
rank: new

我想改变它，就像那样：

Username:    text
money:       text
level:       5
rank:        new

使用bootstrap。

我怎么做？

我的代码是：

<div class="caption">
money: <span class="label label-default">1354</span><br/>
bank money: <span class="label label-default">2314 <i class="fa fa-money"></i></span><br/>
gold: <span class="label label-warning">15</span><br/>
</div>

Answer 1

Bootstrap文档非常清楚。使用col-*-*类来完成您的需要。网格系统是bootstrap的基本原则。

表格示例（横向）为您提供所需内容：RTFM here

简化：

<div class="row">
  <div class="col-sm-2">Username</div><div class="col-sm-10">text</div>
  <div class="col-sm-2">money</div><div class="col-sm-10">text</div>
</div>