Question

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

但是当我从一个小设备上查看它时，我想将所有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>

Answer 2

您对visible-*课程有正确的想法，但您忘记了反对的hidden-*课程，其中*可以是lg, md, sm or xs。这种布局的工作方式如下：

<div class="container">
  <div class="row visible-lg visible-md hidden-xs hidden-xs">
    <div class="col-lg-4 col-md-4 text-center">
      <a href="#" target="_blank"><strong>Toyota</strong></a>
    </div>
    <div class="col-lg-4 col-md-4 text-center">
      <a href="#" target="_blank"><strong>Hyundai</strong></a>
    </div>
    <div class="col-lg-4 col-md-4 text-center">
      <a href="#" target="_blank"><strong>Nissan</strong></a>
    </div>
  </div>
  <div class="row visible-lg visible-md hidden-xs hidden-xs">
    <div class="col-lg-6 col-md-6 text-center">
      <a href="#" target="_blank"><strong>Varebiler</strong></a>
    </div>
    <div class="col-lg-6 col-md-6 text-center">
      <a href="#" target="_blank"><strong>Brugte Biler</strong></a>
    </div>
  </div>
  <div class="row hidden-lg hidden-md visible-sm visible-xs">
    <div class="col-sm-12 col-xs-12 text-center">
      <a href="#" target="_blank"><strong>Toyota</strong></a>
    </div>
  </div>
  <div class="row hidden-lg hidden-md visible-sm visible-xs">
    <div class="col-sm-12 col-xs-12 text-center">
      <a href="#" target="_blank"><strong>Hyundai</strong></a>
    </div>
  </div>
  <div class="row hidden-lg hidden-md visible-sm visible-xs">
    <div class="col-sm-12 col-xs-12 text-center">
      <a href="#" target="_blank"><strong>Nissan</strong></a>
    </div>
  </div>
  <div class="row hidden-lg hidden-md visible-sm visible-xs">
    <div class="col-sm-12 col-xs-12 text-center">
      <a href="#" target="_blank"><strong>Varebiler</strong></a>
    </div>
  </div>
  <div class="row hidden-lg hidden-md visible-sm visible-xs">
    <div class="col-sm-12 col-xs-12 text-center">
      <a href="#" target="_blank"><strong>Brugte Biler</strong></a>
    </div>
  </div>
</div>

请注意，他在您的容器中总共渲染了7个.row，其中2个仅在屏幕为lg或md时显示，而其他5个仅在屏幕为sm或xs。查看此Bootply示例以查看有效的代码：

Bootply

希望这有帮助！另外，在非div元素上使用col-*-*时要小心，它们可能无法按预期呈现。

Answer 3

我知道您曾尝试仅使用visible-xs，但尝试制作两个菜单：

一个visible-xs，它不会在较大的设备上显示。

另一个hidden-xs，它不会显示在超小型设备上。

这种组合将达到预期的效果。使用 only 引导程序实现此目的是最有效的方法。但是，还有其他一些使用Javascript的方法。

Answer 4

您看到的是ul对象的边距。

添加此css解决了问题：

ul {
    margin-bottom: 0;
}

请参阅此bootply以获取示例。

Answer 5

所有答案的答案。

我最后走向另一个方向。我不想要两种不同的导航。我使用了一些CSS来解决问题。

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

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


}

仅在小型设备上添加行 - 引导程序

5 个答案: