Fix first element padding of list-inline

[tagliala]

Hi,

I noticed a strange behaviour of list-inline and I don't know if this is intended.

I'm using that class for list of tags and often they break up in multiple lines.

By default, elements on the lines other than the first, have a 5px padding on the left and I don't like that

The pull request contains a suggested fix (if this behaviour is not intended)

Example: http://jsfiddle.net/tagliala/rUZ2a/1/

[XhmikosR]

I'm not exactly sure this is so simple. In your case it indeed works. But I believe the intention was to keep it vertically aligned with other elements.

For example imagine this:

<div class="col-lg-4 col-sm-4">
    <h3>Foo</h3>
    <ul class="list-inline">
        <li><a href="#"><i class="fa fa-facebook fa-2x"></i></a></li>
        <li><a href="#"><i class="fa fa-twitter fa-2x"></i></a></li>
        <li><a href="#"><i class="fa fa-google-plus fa-2x"></i></a></li>
        <li><a href="#"><i class="fa fa-rss fa-2x fa-2x"></i></a></li>
    </ul>
    <ul class="list-unstyled">
        <li><a href="#">Bar</a></li>
    </ul>
</div>

The list-inline will be -5px to the left compared to the other elements.

[tagliala]

@XhmikosR thanks for your answer.

Since list-inline isn't documented, I don't know what is the exact use case but I also think that 5px should have a reason to be there.

BTW I'm not able to replicate your scenario: http://jsfiddle.net/tagliala/WF4yF/1/

For very small screens I always think the list-inline-fix gives better results

Maybe a situation like this? http://jsfiddle.net/tagliala/WF4yF/2/

IMHO In the latter case the 5px indentation has sense... but is that the rule or the exception? Where are we supposed to use list-inline?

[XhmikosR]

Hmm, I must have applied your patch wrong the first time, cause now that I checked out your branch it works fine for my case too. Your patch, indeed, seems to make more sense.

@cvrebert: what do you think?

[cvrebert]

@XhmikosR Nontrivial CSS/Less is @mdo's department, not mine.