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

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

我知道您尝试过只使用 visible-xs 但尝试制作两个菜单：

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

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

这个组合会达到预期的效果。使用 only bootstrap 是实现此目的的最有效方法。但是，还有其他几种使用 Javascript 的方法。

Answer 2

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

添加这个css解决了问题：

ul {
    margin-bottom: 0;
}

查看此 bootply 示例。

Answer 3

你对 visible-* class 的想法是正确的，但你忘记了对立的 hidden-* class，其中 * 可以是 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 4

谢谢大家的回答。

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

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

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


}

Answer 5

只在bootstrap中的小设备中添加一行真的很容易。

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

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

Add row only on small device - bootstrap

html

css

twitter-bootstrap