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> 

私は、私がお勧めしたいなど、レイアウトのため

Answer 1

それでもブートストラップクラスを使用する場合は、列のリストを行う最も簡単な方法は、<li>アイテムそのものにグリッドクラスを適用することです。

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

• .rowcol-xs-6クラスによって引き起こされ、左右の余白を取り除くために、親ulにお勧めします。

Answer 2

をブートストラップ3を使用していますこのためにテーブルを使用すると、このようなものが仕事をします。

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