html - 仅在小型设备上添加行 - bootstrap

Question

我的菜单分为两个部分。顶部 3 个 li 元素，底部 2 个 li 元素，中间用一行分隔。

但是当我从小型设备查看它时，我想将所有 li 元素对齐成一行，以便将它们分开。

有没有办法使用 Bootstrap 使行仅在小型设备上处于事件状态？我尝试使用visible-xs，但这隐藏了大设备上的菜单。

        <div class="row">
      <div class="col-md-12 nav1">

         <nav>
          <ul>
          <div class="col-md-2 col-md-offset-3">
          <li><a cla target="_blank" href="#"><center><b>Toyota</b></center></a> </li>
          </div>
          <div class="col-md-2">
          <li><a target="_blank" href="#"><center><b>Hyndai </b></center></a> </li>
          </div>
          <div class="col-md-2">
          <li><a target="_blank" href="#"><center><b>Nissan</b></center></a> </li>
          </div>
         </ul>
         </nav>

      </div>
    </div><!-- row -->


    <div class="row">
      <div class="col-md-12 nav2">
        <nav>
        <ul>
          <div class="col-md-2 col-md-offset-4">
          <li><a target="_blank" href="#"><center><b>Varebiler</b></center></a> </li>
          </div>
          <div class="col-md-2">
          <li><a target="_blank" href="#"><center><b>Brugte biler</b></center></a> </li>
          </div>
        </ul>
        </nav>
      </div>
    </div>

Answer 1

在 bootstrap 中仅在小型设备中添加一行确实很容易。

<div class="row visible-sm">
 ... 
 ...
</div>