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

时间：2015-09-11 14:36:04

标签： html css twitter-bootstrap

大家好日子，

我正在设计一个带有引导程序的网络，一切都已完成，最后一件我无法纠正的事情就是把2个div分别悬浮在li里面的左边。在桌面版中，它就像魅力一样，但是当我调整它以使其响应时它变得疯狂：

Desktop Version

Responsive version

Responsive small

正如你可以看到一切都被转动，这是我正在使用的代码：

    <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的默认代码，

1 个答案:

答案 0 :(得分：0)

最后我得到了，

我不得不将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;
}

魔法发生了！

相关问题
最新问题