2016-08-24 62 views
0

我在自举3中创建页面的菜单。 这是我的面板,我有Cretaed。 enter image description here 这是我的一个小组,我创建的代码:面板内的自举列表没有反应

<div class="row"> 
 
    <div class="col-md-1"></div> 
 
    <div class="col-md-10"> 
 
    <div class="panel mepanelo"> 
 
     <div class="row "> 
 
     <div class="col-md-4 big_list"> 
 
      <ul class="list1"> 
 
      <li><a class="btn" role="button" href="figurini.php">Figurini</a> 
 
      </li> 
 
      <li><a class="btn" role="button" href="mezzi.php">Mezzi Militari</a> 
 
      </li> 
 
      <li><a class="btn" role="button" href="accessori.php">Accessori</a> 
 
      </li> 
 
      <li><a class="btn" role="button" href="strumenti.php">Strumenti</a> 
 
      </li> 
 

 
      </ul> 
 
     </div> 
 
     <div class="col-md-4 big_list"> 
 
      <ul class="list1 "> 
 
      <li><a class="btn" role="button" href="fantasy.php">Fantasy</a> 
 
      </li> 
 
      <li><a class="btn" role="button" href="aerei.php">Aerei</a> 
 
      </li> 
 
      <li><a class="btn" role="button" href="ambientazioni.php">Ambientazioni</a> 
 
      </li> 
 
      <li><a class="btn" role="button" href="edizioni.php">Edizioni</a> 
 
      </li> 
 

 
      </ul> 
 
     </div> 
 
     <div class="col-md-4 big_list"> 
 
      <ul class="list1"> 
 
      <li><a class="btn" role="button" href="busti.php">Busti</a> 
 
      </li> 
 
      <li><a class="btn" role="button" href="navi.php">Navi</a> 
 
      </li> 
 
      <li><a class="btn" role="button" href="colori.php">Colori</a> 
 
      </li> 
 
      <li><a class="btn" role="button" href="occasioni.php">Occasioni</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-1"></div> 
 
</div> 
 
</div>

此面板里面的名单响应,但问题是,当页面是片剂的大小在这里列表是如何显示的: enter image description here 我不希望所有空白的灰色空间存在,但我希望所有元素都出现在平板电脑的两个列表中,而不是一个列表中。我证明了隐藏sm的东西,但这隐藏了事物。有没有办法将三个列表中的所有eleemts放在平板电脑的两个列表中?谢谢!

回答

0

使用<div class="col-md-4 col-sm-4 big_list">代替<div class="col-md-4 big_list">

+0

没有什么改变! –

+0

我已经创建了一个小提琴,请检查。 https://jsfiddle.net/m253vopp/ – San

+0

我检查了它。谢谢! –

0

变化从COL-MD的类COL-SM

<div class="col-md-4 big_list"> 

<div class="col-sm-4 big_list"> 
+0

没有什么变化! –

+0

检查此小提琴https://jsfiddle.net/m253vopp/1/ –

0

您仅需要隐藏在平板电脑3日列表(小设备),并在其他2个列表中调整该列表的元素,并仅在小型设备上显示该元素。阅读代码中的评论。并为bootstrap隐藏和可见类检查this

<div class="row"> 
    <div class="col-md-1"></div> 
    <div class="col-md-10"> 
    <div class="panel mepanelo"> 
     <div class="row "> 
     <div class="col-md-4 col-sm-6 big_list"> 
      <ul class="list1"> 
      <li><a class="btn" role="button" href="figurini.php">Figurini</a> 
      </li> 
      <li><a class="btn" role="button" href="mezzi.php">Mezzi Militari</a> 
      </li> 
      <li><a class="btn" role="button" href="accessori.php">Accessori</a> 
      </li> 
      <li><a class="btn" role="button" href="strumenti.php">Strumenti</a> 
      </li> 
      <!-- follwing elements are hidden on all devices except small (tablets) --> 
      <li class="hidden-xs hidden-md hidden-lg"> 
       <a class="btn" role="button" href="busti.php">Busti</a> 
      </li> 
      <li class="hidden-xs hidden-md hidden-lg"> 
       <a class="btn" role="button" href="navi.php">Navi</a> 
      </li> 

      </ul> 
     </div> 
     <div class="col-md-4 col-sm-6 big_list"> 
      <ul class="list1 "> 
      <li><a class="btn" role="button" href="fantasy.php">Fantasy</a> 
      </li> 
      <li><a class="btn" role="button" href="aerei.php">Aerei</a> 
      </li> 
      <li><a class="btn" role="button" href="ambientazioni.php">Ambientazioni</a> 
      </li> 
      <li><a class="btn" role="button" href="edizioni.php">Edizioni</a> 
      </li> 
      <!-- follwing elements are hidden on all devices except small (tablets) --> 
      <li class="hidden-xs hidden-md hidden-lg"><a class="btn" role="button" href="colori.php">Colori</a> 
      </li> 
      <li class="hidden-xs hidden-md hidden-lg" ><a class="btn" role="button" href="occasioni.php">Occasioni</a> 
      </li> 

      </ul> 
     </div> 
     <div class="col-md-4 hidden-sm big_list"> <!-- hidden on small devices --> 
      <ul class="list1"> 
      <li><a class="btn" role="button" href="busti.php">Busti</a> 
      </li> 
      <li><a class="btn" role="button" href="navi.php">Navi</a> 
      </li> 
      <li><a class="btn" role="button" href="colori.php">Colori</a> 
      </li> 
      <li><a class="btn" role="button" href="occasioni.php">Occasioni</a> 
      </li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-1"></div> 
</div> 
0

我认为唯一的问题是你不包括引导引擎。请看看你已经正确地链接了你的引导文件。一旦完成,这段代码应该可以正常工作。

<div class="col-sm-4 big_list">