Не удается выровнять текст правильно - 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).