Gene9y Gene9y - 2 months ago 10
CSS Question

border bottom to li with spans not working

I added a border-bottom style to li with spans inside but it's not working.

<ul>
<li style="border-bottom: 1px solid #ccc">
<span class="col-xs-5">Test 1</span>
<span class="col-xs-7"> Test 2</span>
</li>
</ul>


It's rather straightforward, but it renders the border above the span (Test1, Test2). Am I getting this wrong?

Answer

Using bootstraps col-* puts a float on the element. Bootstrap is built to handle this by wrapping columns with the row class. Something like this:

<ul>
  <li class='row' style="border-bottom: 1px solid #ccc">
    <span class="col-xs-5">Test 1</span>
    <span class="col-xs-7"> Test 2</span>
  </li>
</ul>

Or you could put the row class on the ul, just depends on how you're using the li elements.