red888 red888 - 4 months ago 14
Javascript Question

bootstrap 3: Aligning badges in a list

I have a list with badges like this:

<ul class="list-group ticketView">
<li class="list-group-item ticketView">
<span class="badge pull-left">dkf</span>
skdjflksdf
</li>...


Here is what is looks like:
enter image description here

I know I can calculate the right padding for each badge with js, but I was wondering if bootstrap had a way to align the badges and text so that they are even (like two columns).

edit---
As per webeno this was trivially simple:

span.badge.pull-left {
margin-right: 10px;
width: 100px;
}


As long as I make sure the text isn't too long this works perfectly.

Answer

I believe this could be achieved by using tables instead of list items, and setting .list-group-item's display property to inherit (by default it uses display:block).

So in your custom CSS file you could add this:

.list-group-item
{
    display:inherit
}

Your table structure could look something like this:

<div class="col-md-3">
<table class="list-group ticketView">
    <tbody><tr class="list-group-item ticketView">
      <td class="badge pull-left">dkdsdcf</td>
      <td>skd</td>
      <td>ef</td>
      <td>wef</td>
      <td>ejflksdf</td>
    </tr>
    <tr class="list-group-item ticketView">
      <td class="badge pull-left">dk</td>
      <td>skdssd</td>
      <td>efasdasd</td>
      <td>wefdasdasdasd</td>
      <td>ejff</td>
    </tr>
    <tr class="list-group-item ticketView">
      <td class="badge pull-left">dkfsdsdcsdcs</td>
      <td>d</td>
      <td>ef</td>
      <td>w</td>
      <td>ejfasasdasdadf</td>
    </tr>
</tbody></table>
</div>

Bootply demo here