html - 面板内的 Bootstrap 列表没有响应

Question

我正在 bootstrap 3 中创建一个页面的菜单。 这是我创建的面板。 这是我创建的面板的代码:

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

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

Answer 1

使用<div class="col-md-4 col-sm-4 big_list">而不是 <div class="col-md-4 big_list">