2

我是 Twitter 的 Bootstrap 框架的新手。所以请原谅我的无知。

我正在尝试创建一个按预期工作的轮播。但是，仅在 iPhone 上，它不会横向拉伸。在电脑和 iPad 上可以。Twitter 的示例（此处）确实可以扩展。这是一张图片。

轮播宽度

这是我的CSS：

/* Carousel base class */

.carousel
{
  margin-bottom: 60px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.carousel .container 
{
  position: relative;
  z-index: 9;
}

.carousel-control 
{
  height: 80px;
  margin-top: 0;
  font-size: 120px;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
  background-color: transparent;
  border: 0;
  z-index: 10;
}

.carousel .item 
{
  height: 500px;
}

.carousel img 
{
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

.carousel-caption 
{
  background-color: transparent;
  position: static;
  max-width: 550px;
  padding: 0 20px;
  margin-top: 290px;
}

.carousel-caption h1,
.carousel-caption .lead 
{
  margin: 0;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.carousel-caption .btn 
{
  margin-top: 10px;
}

谢谢！

4

1 回答 1

0

如果您右键单击此页面：http: //twitter.github.io/bootstrap/examples/carousel.html

查看页面源。

导航到最后，您会看到以下代码：

  <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>
    <script>
      !function ($) {
        $(function(){
          // carousel demo
          $('#myCarousel').carousel()
        })
      }(window.jQuery)
    </script>
    <script src="../assets/js/holder/holder.js"></script>

确保您的页面上有此代码，并且指向 javascript 的链接是正确的。

如果您添加了这些引用，那么我注意到您使用的另一件事max-width:不要在max-width:使用“%”时使用“px”

于 2013-07-14T06:08:03.430 回答