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/

带有“Name：”等的文本应该对齐，另一个文本应该左对齐。由于某种原因，“名称：”等在左侧没有正确对齐。

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

Answer 1

我真的无法弄清楚代码中的任何错误。就像你说的那样，可能是因为柱子太薄了。

使用BR分离数据可能是最糟糕的方法。对于表格数据使用表。如果表格不是你想要的，你也可以使用无序列表或描述列表（DL）。

无法正确对齐文本 - Bootstrap

1 个答案: