html - 无法正确对齐文本 - Bootstrap

Question

我有以下代码:

<div class="col-md-9 col-md-offset-3">
    <div class="col-md-9">
        <div class="page-header"><h3>Your Profile</h3></div>
        <div class="col-md-5">
            <div class="col-md-4 text-right">Name:<br><br>Email:<br><br>Phone:<br><br>Gender:</div>
            <div class="col-md-8 text-left">John Smith<br><br>email@email.com<br><br>07878787456<br><br>Male</div>
        </div>
        <div class="col-md-7">
            <div class="col-md-4 text-right">Name:<br><br>Email:<br><br>Phone:<br><br>Gender:</div>
            <div class="col-md-8 text-left">John Smith<br><br>email@email.com<br><br>07878787456<br><br>Male</div>
        </div>
    </div>
</div>

出于某种原因，它显示如下:http://i.imgur.com/0YPMWf3.png

这里是一个jsfiddle(扩大输出框的大小):http://jsfiddle.net/z49Ry/

带有“姓名:”等的文本应右对齐，其他文本应左对齐。由于某种原因，“名称:”等在左侧没有正确对齐。

我猜这可能是因为跨度太小，如果是这样，那么显示数据的更好解决方案是什么？

Answer 1

我真的无法找出您的代码中的任何错误。就像你说的，可能是色谱柱太细造成的。

使用 BR 来分离数据可能是最糟糕的方法。对于表格数据使用表。如果表格不是您要查找的内容，您也可以使用无序列表或描述列表 (DL)。