具有多列的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> 

我使用引导3布局等

Answer 1

如果你仍然想使用自举类，做列列出了最简单的方法是通过应用网格类的<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>