Question

我正在尝试使用一些格式化的twitter bootstrap carousel工作（3.0+），所以我循环浏览右侧的图像/左侧图像左侧的图像，然后右侧的文本。

当渲染（rails 3.13）时，似乎网格系统被暂停 - 图像被卡在左边框上这里是我的小提琴：

但是这个例子直接从bootstrap网站中取出：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
    <div class="item active">
        <div class="row">
            <div class="col-md-5-offset-1">
                <img src="http://ndevilla.free.fr/lena/lena.jpg" alt="..."></img>
                <div class="carousel-caption">Caption</div>
                <div class="col-md-6">
                     <h1>Some profound text here</h1>

                    <p>this is an image from my image processing past</p>
                </div>
            </div>
        </div>
    </div>
    <div class="item">
        <img src="http://perception.csl.illinois.edu/gpca/applications/baboon_small.jpg" alt="..."></img>
    </div>
    <div class="item">
        <img src="https://www.google.com/images/srpr/logo11w.png" alt="..."></img>
    </div>
    <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>

</div>

这是设计的吗？（这是我的第一篇文章）

Answer 1

你的行中有太多不同的div和类。

这是一个示例，它使用两个.row-xs-6在每个.row或'slide'中执行请求。使用Bootstrap的Carousel示例中的示例代码和注释 - http://goo.gl/v2qY3J

看看 - http://cdpn.io/wcpuf

<div class="row">
    <div class="col-xs-6">
        <img alt="First Slide" src="http://placekitten.com/g/350/280">
    </div>
    <div class="col-xs-6">
        <h1>Temporary Title Text on the Right</h1>
        <p>Some paragraph copy for fun</p>
    </div>
</div><!-- end row -->

Twitter Bootstrap 3.0轮播格式与文本

1 个答案: