Bootstrap：里面的div

Question

我正在尝试将divs添加到ul的列表项中，但这会导致Twitter Bootstrap框架表现得很奇怪。这是因为我做错了什么，还是我想做的事情有不同的解决方案？

代码：

<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>

CSS代码：

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

我正在使用float属性试图让每首歌曲的标题显示在左侧，而持续时间则显示在右侧。从我（非常有限的）CSS经验来看，这应该可行。

结果：

我的印象是列表项的尺寸不考虑div尺寸，而是调整大小，就像它们完全是空的一样。

有什么想法吗？

Answer 1

您可以clear:both li将li视为块级元素。

（在clearfix上添加li）

跟踪列表

<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>

选中此fiddle

Answer 2

回答这个问题已经很晚了，但我认为如果他们想尝试替代方法来解决这个问题，那将会有所帮助。

我将结构保存在容器中，并将其max-width属性设置为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>