Question

嗨我有一个bootstrap轮播的问题。我制作的幻灯片显示在与左右按钮相同的行中。这是图片：

carousel error

这里是代码（它是引导文档的副本）：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="main.css" />
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

</head>
<body>
    <div class="jumbotron">
        <h1>TEST</h1>
        <p>test1</p>
        <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
    </div>
    <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- Carousel items -->
                <div class="carousel-inner">
            <div class="active item">
                <h2>Slide 1</h2>
                <div class="carousel-caption">
                    <h3>First slide label</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="item">
                <h2>Slide 2</h2>
                <div class="carousel-caption">
                    <h3>Second slide label</h3>
                    <p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p>
                </div>
            </div>
            <div class="item">
                <h2>Slide 3</h2>
                <div class="carousel-caption">
                    <h3>Third slide label</h3>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
    <!--<img style="max-width:100%; height:auto;display: block;margin-left: auto;margin-right: auto;" src="people.png" />-->
</body>
</html>

编辑：这是小提琴：http://jsfiddle.net/WLyb7/

在Chrome中测试33.0.1750.146 m。 Firefox 27.0.1中的相同内容

Answer 1

旋转木马最初设计用于图像，左右按钮覆盖图像。（看example）。如果您不想使用图片，则需要为这些项目添加一些保证金：

.carousel .item {
  margin: 0 15%; // 15% is the width of the buttons. Increase it if needed.
}

编辑：另一种可能性就是简单地让内部DIV保持幻灯片更小：

.carousel-inner {
  width: 70%;
  margin: auto; // for centering.
}

请记住，Bootstrap只是一个基本框架，其JavaScript旨在独立于布局工作。您可以随意重新设计旋转木马，例如在其他任何地方移动控件（按钮，指示器等），或者只是将它们移出。

Answer 2

所以我所知道的唯一的黑客就是在旋转木马里放一个空的透明图片，然后在里面显示你想要的任何东西。

Bootstrap 3.1.1 Carousel not working aka为什么幻灯片与导航在同一行？

2 个答案: