仅在小型设备上添加行 - 引导程序 [英] Add row only on small device - bootstrap

问题描述

我有两个菜单。 3 li元素在顶部，2在底部，用一行分隔。

I have a menu in two sections. 3 li elements in the top, and 2 in the bottom, separated with a row.

但是当我从一个小设备查看它时，我想对齐所有li元素

But when I view it from a small device i would like to align all li element to be in a row so they are separated.

有没有办法使用引导来使行仅在小型设备上处于活动状态？我尝试使用visible-xs，但隐藏在大设备上的菜单。

Is there a way to use bootstrap to make a row active only on small devices? I tried using visible-xs but that hides the menu on the big device.

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

推荐答案

我结束了另一个方向。我想要两个不同的导航。
我使用一些css来解决问题。

I ended up going in an other direction. I dident want two different navs. I used some css to solve the problem.

 @media (max-width: 992px) 
{
    .nav1 ul li
    {
    margin-top: 10px;
    }

    .last-child
    {
    margin-top: 10px;
    }


}

这篇关于仅在小型设备上添加行 - 引导程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！