CODEWITHSUNDEEP
htmlcsslisttwitter-bootstrap
Lee White
Lee White

Reputation: 3729

Bootstrap: div inside li

I am trying to add divs to the list items of my ul, but this is causing the Twitter Bootstrap framework to behave weirdly. Is this because of something I am doing wrong, or is there a different solution for what I am trying to do?

The code:

<h3>Track listing</h3>
<ul class="list-group">
    <li class="list-group-item">
        <div class="song-title">1. Song Title</div>
        <div class="song-duration">3:50</div>
    </li>
    <li class="list-group-item">
        <div class="song-title">2. Song Title</div>
        <div class="song-duration">3:50</div>
    </li>
    <li class="list-group-item">
        <div class="song-title">3. Song Title</div>
        <div class="song-duration">3:50</div>
    </li>
</ul>

The CSS code:

.song-title {float: left;}
.song-duration {float: right;}

I am using the float attributes in an attempt to make each song's title appear on the left, and the durations on the right. From my (very limited) CSS experience, this should work.

The result:

enter image description here

I have the impression that the list items' sizes are not taking the div sizes in consideration, instead resizing as if they were completely empty.

Any thoughts?

Upvotes: 5

Views: 6972

Answers (2)

WitVault
WitVault

Reputation: 24140

It pretty late to answer this question but I thought it will help some-one if they want to try alternative approach to the accepted solution.

I kept the structure in a container and set its max-width property to 100% 

<ul class="list-group">
  <li class="list-group-item">
    <div class="container" style="max-width:100%">
      <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
      </div>
    </div>
  </li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Upvotes: 0

karthikr
karthikr

Reputation: 99660

You can clear:both on the li to treat the li as a block level element.

(Add a clearfix on the li)

Track listing

<ul class="list-group">
    <li class="list-group-item clearfix">
        <div class="song-title">1. Song Title</div>
        <div class="song-duration">3:50</div>
    </li>
    <li class="list-group-item clearfix">
        <div class="song-title">2. Song Title</div>
        <div class="song-duration">3:50</div>
    </li>
    <li class="list-group-item clearfix">
        <div class="song-title">3. Song Title</div>
        <div class="song-duration">3:50</div>
    </li>
</ul>

Check this fiddle

Upvotes: 10

Related Questions