Question

我在bootstrap 3中创建了一个页面菜单。这是我创建的小组。这是我创建的面板的代码：

＆＃13;

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

＆＃13;

此面板及其中的列表是响应式的，但问题是，当页面的大小与平板电脑相同时，列表的显示方式如下：我不想要那里所有空白的灰色空间，但我希望所有元素都出现在平板电脑的2个列表中而不是一个列表中。我证明了像hidden-sm这样的东西，但这隐藏了事情。有没有办法将三个列表中的所有元素放在平板电脑的2个列表中？谢谢！

Answer 1

将课程从col-md更改为col-sm

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

到

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

Answer 2

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

Answer 3

您只需要在平板电脑（小型设备）上隐藏第三个列表，并在其他2个列表中调整该列表的元素，并仅在小型设备上显示该元素。阅读代码中的注释。对于bootstrap隐藏和可见类检查this。

PlaybackControlsRow

Answer 4

我认为唯一的问题是你不包括引导引擎。请确保您已正确链接您的引导程序文件。完成后，此代码应该可以正常工作。

{{1}}

面板内的引导列表没有响应

4 个答案: