элемент списка html с несколькими столбцами

Question

Я пытаюсь составить список, состоящий из имен пользователей и реальных имен (например, jbloggs (Joe Bloggs). Я бы хотел, чтобы имена реальных строк были в столбце, но когда я добавляю <span class="col-xs-6"> вокруг каждой части (см ниже) список винты вверх! Кто-нибудь знает, как это сделать?

<ul> 
    <li><a href="#"><span class="col-xs-6">jbloggs</span><span class="col-xs-6">- Joe Bloggs</span></a></li> 
    <li><a href="#"><span class="col-xs-6">fjibbert</span><span class="col-xs-6">- Flipperty Jibbert</span></a></li> 
    <li><a href="#"><span class="col-xs-6">beno</span><span class="col-xs-6">- Brian Eno</span></a></li> 
</ul> 

Я использую Bootstrap 3 для разметки и т.д.

Answer 1

Если вы все еще хотите использовать классы Bootstrap, самый простой способ сделать списки столбцов является путем применения классов сетки для самих <li> элементов.

<ul class="row"> 
    <li class="col-xs-6"></li> 
    <li class="col-xs-6"></li> 
</ul> 

• .row рекомендуется на родителе ul избавиться от левого и правого полей, вызванных col-xs-6 классов.

Answer 2

Я бы рекомендовал используя таблицу для этого, что-то подобное сделало бы эту работу.

<table> 
 
    <thead> 
 
    <tr> 
 
    <th>Username</th> 
 
     <th>First name</th> 
 
     <th>Last name</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
    <td>JSmith</td> 
 
    <td>Jill</td> 
 
    <td>Smith</td> 
 
    </tr> 
 
    <tr> 
 
    <td>EJackson</td> 
 
    <td>Eve</td> 
 
    <td>Jackson</td> 
 
    </tr> 
 
    </tbody> 
 
</table>