ブートストラップ：カルーセル内部のコンテナ/カラム

Question

私はブートストラップテンプレートに全幅カルーセルを追加しましたが、カルーセル内部にカラム構造を持たせたいと思います。

したがって、olとli要素は全角で、.container要素は最大幅が1140pxである必要があります。あなたが緑の色合いは、私が.container要素であることを計画したいものです（下記のscreengrabに私が何を意味するか見ることができます

：

ここでは、私が使用しているマークアップです：

<ol class="carousel-indicators"> 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"> 

    <div class="container"> 
     <div class="row"> 
     <div class="col-md-12"> 

      <p>Fernatest iur? Landige nimagna tinullabo. Et eumqui quiduntem ium sumque vitiae plam nest, eturepe rovitaspidel imodis eos perum velibus rere non explabore voluptinciae volum, ut am quos con reratiis rehent liquuntur aut odit quassin ctiatur sitatus, comnis diti iusam, omnimus quunto omnis et verum laborpor accus, sunt.</p> 

     </div> 
     </div> 
    </div> 

    </li> 
</ol> 

しかし、これは動作するように表示されません。私はdevのツールで見てみると、container要素が側にシフトしているように見える、とテキストはそれの外にあふれている：。

container要素は、このような要素の中に置かれることになっていませんか？このような列構造を実現する別の方法はありますか？

Answer 1

コンテナを間違った場所に置き、ドットがレンダリングされる場所に置きました。

<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" role="listbox"> 
    <div class="item active"> 
     <div class="conatiner"> 
     Caption Slide 1 
     </div> 
    </div> 
    <div class="item"> 
     <div class="conatiner"> 
     Caption Slide 2 
     </div> 
    </div> 
    <div class="item"> 
     <div class="conatiner"> 
     Caption Slide 3 
     </div> 
    </div>   
    </div> 

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

Answer 2

コンテナを表示する必要があります。カルーセルインジケータは、スライダの下部にあるモックアップに表示されているラウンドアイコンのために、スライドをナビゲートします。これはあなたを助けるかもしれません。コンテナ部門を品目部門に入れます

'http://getbootstrap.com/javascript/#carousel'