javascript - bootstrap 3: Aligning badges in a list - Stack Overflow

admin管理员组

文章数量:1431419

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:

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.

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:

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.

• javascript
• css
• twitter-bootstrap-3

Share Improve this question Follow edited Mar 27, 2014 at 13:15 red888 asked Mar 27, 2014 at 13:00 red888red888 31.9k7474 gold badges268268 silver badges504504 bronze badges 8

• what about explicitly setting their widths (or min-width)...? i might be wrong, but i don't think you'll be able to calculate the width/padding with pure CSS... – benomatis Commented Mar 27, 2014 at 13:07
• 1 ...alternatively you could use tables instead... – benomatis Commented Mar 27, 2014 at 13:09
• Oh man sooo easy. I was thinking about how to do that, but for some reason it never occurred to me its as simple as setting it on the span's styles. All update my post – red888 Commented Mar 27, 2014 at 13:12
• If you post that as an answer I will except it. – red888 Commented Mar 27, 2014 at 13:14
• Seems to work well when removing the specific width: bootply./125233 – Carol Skelly Commented Mar 27, 2014 at 13:27

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 2

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

Please check the solution below,

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

</li>
<li class="list-group-item ticketView">
    <span class="badge pull-left">aaaaa</span>
     <span class="title">aaa</span>
</li>

    ul
    {
        list-style-type: none;
        padding: 0;
        margin: 0;
        text-align: right;
    }

JSFiddle for test

Can you use CSS rules and modified your HTML:

HMTL:

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

CSS:

.ist-group li { clear:both; display:block; }
.ist-group li span.badge {float: left;}
.ist-group li span.badge-title {float: right;}

I have not tested this code, it is only to see how they can do.

“edit--- As per webeno this was trivially simple”…

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

This worked for me. It is easier to understand visually, so I have created a screenshot paring 3 ways of doing this: old fashioned table, regular list group (the problem), and list group using the “pull-left” technique described by webeno. [https://i.sstatic/l4PBp.jpg]

Hope this is helpful to anyone having trouble.

本文标签： javascriptbootstrap 3 Aligning badges in a listStack Overflow