僅在小型設備上添加行-引導程序

Question

我有兩個部分的菜單。 頂部有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>

Answer 1

僅在引導程序中的小型設備中添加行是非常容易的。

<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 ，不會在超小型設備上顯示。

這種結合將達到期望的結果。 這是僅使用引導程序即可完成此操作的最有效方法。 但是，還有其他幾種使用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;
    }


}