Question

我正在使用bootstrap 3来制作我的网站。当我做滑块时，当我在移动设备上打开此页面时，图像在视口外部向右移动。

在firefox中，滑块不起作用，任何解决方案？

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>


    <link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/flatly/bootstrap.min.css" rel="stylesheet">
    <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'rel="stylesheet">

    <link href="{{ url('assets/css/style.css') }}" rel="stylesheet">

    <title>Social</title>
</head>

http://scr.hu/0lw/816la

HTML：

    <div id="carousel-example-generic2" class="carousel slide">

  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic2" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic2" data-slide-to="2"></li>
  </ol> 
  <div class="carousel-inner">
    <div class="item active">
      <img src="assets/images/s1.jpg" alt="" >
      <!-- Opis slajdu -->
      <div class="carousel-caption">
        <h3>Lorem ipsum dolor sit amet.</h3>
        <p>Suspendisse fermentum arcu et ligula rhoncus dapibus.</p>
      </div>
    </div> 
    <div class="item">
      <img src="assets/images/s2.jpg" alt="">
      <!-- Opis slajdu -->
      <div class="carousel-caption">
        <h3>Lorem ipsum dolor sit amet.</h3>
        <p>Suspendisse fermentum arcu et ligula rhoncus dapibus.</p>
      </div>
    </div> 
    <div class="item">
      <img src="assets/images/s3.jpg" alt="">
      <!-- Opis slajdu -->
      <div class="carousel-caption">
        <h3>Lorem ipsum dolor sit amet.</h3>
        <p>Suspendisse fermentum arcu et ligula rhoncus dapibus.</p>
      </div>
    </div>

  </div>
  <a class="left carousel-control" href="#carousel-example-generic2" data-slide="prev">

   <span class="icon-prev"></span>
  </a>

<a class="right carousel-control" href="#carousel-example-generic2" data-slide="next">
    <span class="icon-next"></span>
  </a>
</div>

在css中，我什么都没改变。

Answer 1

您设置的最小宽度比您正在查看此设备的任何设备的视口宽。这就是为什么它不会被人看到的原因。把它添加到你的头上：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Bootstrap滑块向右移动

1 个答案: