html - 嵌套 Bootstrap 行中的文本对齐问题

Question

我想像这样显示姓名、电话和电子邮件:

| Joe Shmoe           |       555-555-5555 |
|                     |      joe@shmoe.net |

当名称太长时，我想这样包装:

| Josephine           |       555-555-5555 |
| Hosssenpfefer       |     jfine@mail.net |

当电子邮件太长时，我想像这样溢出:

| Joe Shmoe           |       555-555-5555 |
|               someverylongemail@mail.net |

我创建了这个 html，它定义了一个包含两个半宽列的行。右侧列有两个嵌套行，每个嵌套行都有一个全宽列...

<div class="row">
  <h5 class="col-xs-6 list-group-item-heading">Joe Shmoe</h5>
  <div class="col-xs-6">
    <div class="row">
      <p class="col-xs-12 list-group-item-text text-right">555-555-5555</p>
    </div>
    <div class="row">
      <p class="col-xs-12 list-group-item-text text-right" style="color:navy">joe@shmoe.net</p>
    </div>
  </div>
</div>

这几乎可以工作，but as you can see in this fiddle ，底部嵌套行不会右对齐。 (您可能需要缩小 View 才能看到问题)。

我希望它像上面的嵌套行一样右对齐。此外，当内容很长时，我希望内容(未换行)在左侧溢出，必要时溢出到左栏。

有人可以给点建议吗？谢谢!

Answer 1

我会尝试为此使用表格。它可能需要额外的样式，但查找表可以更轻松地处理较长的字符。这完全正确吗？

<div class="col-xs-12">
  <table class="table">
  <tr class=""><td class="col-xs-6">Joe Shmoe</td><td class="col-xs-6 text-right">555 555-5555</td></tr>
  <tr class=""><td class="col-xs-6"></td><td class="col-xs-6 text-right">somereallylongemailaddress@reallylongemail.com</td></tr>
  </table>
</div>