html Listenelement mit mehreren Spalten

Question

Ich versuche eine Liste zu erstellen, die aus Benutzernamen und echten Namen besteht (zB jbloggs (Joe Bloggs). Ich hätte gerne die richtigen Namen in einer Spalte, aber wenn ich <span class="col-xs-6"> um jeden Teil hinzugefügt werden (siehe unten), um die Liste Schrauben-up! Wer weiß, wie das?

<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> 

ich bin mit Bootstrap 3 für das Layout usw.

Answer 1

Wenn Sie wollen immer noch die Bootstrap-Klassen verwenden, der einfachste Weg, Spalte Listen zu tun ist durch die Gitterklassen Anwendung auf die <li> Elemente selbst.

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

• .row ist auf dem Mutter geraten ul von links loszuwerden und rechten Rand, verursacht durch die col-xs-6 Klassen.

Answer 2

zu tun, würde ich empfehlen, Mit einer Tabelle hierfür würde so etwas funktionieren

<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>