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

我有两个部分的菜单。顶部有3个li元素，而底部有2个li元素，以行分隔。

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

有没有办法使用引导程序使行仅在小型设备上处于活动状态？我尝试使用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>

最佳答案

仅在引导程序中的小型设备中添加行是非常容易的。

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

关于html - 仅在小型设备上添加行- bootstrap ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27952538/