Question

如何在xs-size上隐藏bootstrap-carousel中的一两个项目？

当我在carousel中将此类'hidden-xs'添加到此项目时，项目div看起来像：

<div class="item hidden-xs">
      <img src="imgTop2.jpg" alt="...">
</div>

所有物品和旋转木马都消失了。

当我将'hidden-xs'类添加到此项的img元素时，存在同样的问题。

我该如何解决？我想在xs上只隐藏一两张幻灯片。其他人必须通过可见。

我的代码如下：

<div id="carousel-top" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="hidden carousel-indicators" style="display:none">
      <li data-target="#carousel-top" data-slide-to="0" class="active"></li>
      <li class="" data-target="#carousel-top" data-slide-to="1"></li>
      <li class="" data-target="#carousel-top" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
      <img src="imgTop.jpg" alt="...">
    </div>

    <div class="item">
      <img src="imgTop2.jpg" alt="...">
    </div>

    <div class="item">
      <img src="imgTop3.jpg" alt="...">
    </div>

    <div class="item">
      <img src="imgTop4.jpg" alt="...">
    </div>

    <div class="item">
      <img src="imgTop5.jpg" alt="...">
    </div>


    </div>

    <!-- Controls -->
    <a class="hidden left carousel-control" href="#carousel-top" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="hidden right carousel-control" href="#carousel-top" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

Answer 1

我无法想到只使用引导辅助类的方法，因为轮播脚本取决于.item类。但是你可以使用以下jQuery：

if ($(window).width() < 960) {
     $('#carousel-top .hide-on-mobile').removeClass('item').addClass('hide');
}

您只需将类.hide-on-mobile添加到要隐藏在移动设备上的项目。

~~Working Example~~

Answer 2

或者您可以使用CSS媒体查询隐藏您在移动设备上选择的项目：

UIWebView

您只需要在要隐藏的项目中添加class =“slide-hide-on-mobile”：

@media screen and (max-device-width: 800px) {
  .slide-hide-on-mobile { display: none; }
}

Bootstrap轮播如何在xs大小的滑块上隐藏一个项目？

2 个答案: