html - Bootstrap 如何将 2 个 div 放入 li 中？

Question

大家好

我正在使用 bootstrap 设计一个 web，一切都已完成，我无法纠正的最后一件事是将 2 个 div 分别 float 到 li 内的左侧。在桌面版本中就像一个魅力但是当我调整它的大小以响应时它变得疯狂:

如您所见，一切都发生了变化，这是我正在使用的代码:

    <div class="row-fluid">
  <div class="span12 hs_left hs_top_fifty">
    <h1 class="lined"> Ranking de usuarios </h1>
  </div>
  <div class="span4 hs_ranking">
    <div class="span10 hs_top_fifty hs_rank_tit hs_separador_rank">
      <h2>Top último mes</h2>
    </div>
    <ul>
      <li>
        <div class="span12 hs_separador_rank">
          <div class="span6 hs_nom_rank">Usuario</div>
          <div class="span6 hs_ptos_rank">Puntos</div>
        </div>
      </li>
      <li>
        <div class="span12">
          <div class="span6 hs_nom_rank">Douglas Roos</div>
          <div class="span6 hs_ptos_rank">25</div>
        </div>
      </li>
      <li>
        <div class="span12">
          <div class="span6 hs_nom_rank">Javier Jimenez</div>
          <div class="span6 hs_ptos_rank">24</div>
        </div>
      </li>
      <li>
        <div class="span12">
          <div class="span6 hs_nom_rank">Jorge Martinez</div>
          <div class="span6 hs_ptos_rank">23</div>
        </div>
      </li>
      <li>
        <div class="span12">
          <div class="span6 hs_nom_rank">Manuel Briceño</div>
          <div class="span6 hs_ptos_rank">22</div>
        </div>
      </li>
      <li>
        <div class="span12">
          <div class="span6 hs_nom_rank">Kevin Roos</div>
          <div class="span6 hs_ptos_rank">21</div>
        </div>
      </li>
      <li></li>
      <li></li>
      <li><div class="span6 hs_ver_mas offset3"> <a href="javascript:Ranking("mes");" class="hs_mas_btn"> Ver más </a> </div></li>
    </ul>
  </div>
  <div class="span4 hs_ranking">
    <div class="span10 hs_top_fifty hs_rank_tit hs_separador_rank">
      <h2>Top General</h2>
    </div>
    <ul>
      <li>
        <div class="span12 hs_separador_rank">
          <div class="span6 hs_nom_rank">Usuario</div>
          <div class="span6 hs_ptos_rank">Puntos</div>
        </div>
      </li>
      <li>
        <div class="span12">
          <div class="span6 hs_nom_rank">Douglas Roos</div>
          <div class="span6 hs_ptos_rank">25</div>
        </div>
      </li>
      <li>
        <div class="span12">
          <div class="span6 hs_nom_rank">Javier Jimenez</div>
          <div class="span6 hs_ptos_rank">24</div>
        </div>
      </li>
      <li>
        <div class="span12">
          <div class="span6 hs_nom_rank">Jorge Martinez</div>
          <div class="span6 hs_ptos_rank">23</div>
        </div>
      </li>
      <li>
        <div class="span12">
          <div class="span6 hs_nom_rank">Manuel Briceño</div>
          <div class="span6 hs_ptos_rank">22</div>
        </div>
      </li>
      <li>
        <div class="span12">
          <div class="span6 hs_nom_rank">Kevin Roos</div>
          <div class="span6 hs_ptos_rank">21</div>
        </div>
      </li>
      <li></li>
      <li></li>
      <li><div class="span6 hs_ver_mas offset3"> <a href="javascript:Ranking("general");" class="hs_mas_btn"> Ver más </a> </div></li>
    </ul>
  </div>
  <div class="span4 hs_ranking">
    <div class="span10 hs_top_fifty hs_rank_tit hs_separador_rank">
      <h2>Usuarios + activos</h2>
    </div>
    <ul>
      <li>
        <div class="span12 hs_separador_rank">
          <div class="span6 hs_nom_rank">Usuario</div>
          <div class="span6 hs_ptos_rank">Puntos</div>
        </div>
      </li>
      <li>
        <div class="span12">
          <div class="span6 hs_nom_rank">Douglas Roos</div>
          <div class="span6 hs_ptos_rank">25</div>
        </div>
      </li>
      <li>
        <div class="span12">
          <div class="span6 hs_nom_rank">Javier Jimenez</div>
          <div class="span6 hs_ptos_rank">24</div>
        </div>
      </li>
      <li>
        <div class="span12">
          <div class="span6 hs_nom_rank">Jorge Martinez</div>
          <div class="span6 hs_ptos_rank">23</div>
        </div>
      </li>
      <li>
        <div class="span12">
          <div class="span6 hs_nom_rank">Manuel Briceño</div>
          <div class="span6 hs_ptos_rank">22</div>
        </div>
      </li>
      <li>
        <div class="span12">
          <div class="span6 hs_nom_rank">Kevin Roos</div>
          <div class="span6 hs_ptos_rank">21</div>
        </div>
      </li>
      <li></li>
      <li></li>
      <li><div class="span6 hs_ver_mas offset3"> <a href="javascript:Ranking("activos");" class="hs_mas_btn"> Ver más </a> </div></li>
    </ul>
  </div>
</div>

这是CSS

    .hs_ranking {
        background: url(../images/post_bg.png) no-repeat;
        background-size: 100% 100%;
        min-height: 400px!important;
        padding-bottom: 20px;
        margin-left: 0px !important;
    }
    .hs_top_fifty {
    margin-top: 50px
}
    .hs_ranking ul{
        margin:40px;
        font-size:13px;
        line-height:15px;
    }
    .hs_nom_rank{
        text-align:left;
    }
    .hs_ptos_rank{
        text-align:right;
    }
    .hs_rank_tit{
        margin-left:25px !important;
        text-align: center;
    }
    .hs_separador_rank{
        background: url(../images/seprator.png) repeat-x;
        background-position: bottom;
        background-size: 100% 20%;
    }
    .hs_ver_mas {
        margin-top: 20px;
    }
    .hs_mas_btn {
        background: url(../images/mas_btn.png) no-repeat;
        height: 57px;
        padding-top: 14px;
        float: left;
        width: 100%;
        text-align: center;
        background-size: 96%
    }
    .hs_mas_btn:hover {
        background: url(../images/more_hover.png) no-repeat;
        background-size: 96%;
        height: 57px;
        color: #000
    }

span6 span12 和 row-fluid 代码是 bootstrap 的默认值，

Answer 1

我终于明白了，

我必须将 CSS 更改为:

.hs_ranking {
    background: url(../images/post_bg.png) no-repeat;
    background-size: 100% 100%;
    min-height: 400px!important;
    padding-bottom: 20px;
    margin-left: 0px !important;
    overflow:hidden;
}

.hs_ranking ul{
    margin:40px;
    font-size:13px;
    line-height:15px;
}
.hs_ranking ul li{
    height:16px;
}
.hs_ranking ul li:nth-child(2) .span2{
    font-size:20px;
}
.hs_ranking ul li:nth-child(3) .span2{
    font-size:16px;
}
.hs_ranking ul li:nth-child(4) .span2{
    font-size:12px;
}
.hs_ranking ul li .span12 .span6{
    width:48.93617021276595% !important;
    float:left !important;
}
.hs_ranking ul li .span12 .span2{
    width: 14.893617021276595% !important;
    float:left !important;
}
.hs_ranking ul li .span12 .span4{
    width: 31.914893617021278% !important;
    float:left !important;
}
.hs_ranking ul li .span6{
    width:48.93617021276595% !important;
}
.hs_nom_rank{
    text-align:left;
}
.hs_ptos_rank{
    text-align:right;
}
.hs_rank_tit{
    margin-left:25px !important;
    text-align: center;
    width: 80% !important;
}
.hs_separador_rank{
    background: url(../images/seprator.png) repeat-x;
    background-position: bottom;
    background-size: 100% 20%;
}
.hs_ver_mas {
    margin-top: 20px;
}

奇迹发生了!