Bootstrap：旋转木马内的容器/列

Question

我在我的Bootstrap模板中添加了一个全宽旋转木马，不过我想在旋转木马里面有一个列结构。

因此ol和li元素应为全宽，.container元素的最大宽度应为1140px。

你可以在下面的screengrab中看到我的意思（绿色色调是我计划成为.container元素：

这是我正在使用的标记：

<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>

然而，这似乎不起作用。当我查看开发工具时，container元素似乎移到了侧面，文本溢出了它：

container元素是否应该放在像这样的元素中？有没有另一种方法来实现这种柱结构？

Answer 1

您需要将容器放入.item分区，因为轮播指示器用于滑块底部的模型中显示的圆形图标以浏览幻灯片。这可能对你有帮助。将容器分区放在项目分区

中

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

Answer 2

只是想告诉您，您将容器放在错误的位置，将其放置在呈现点的位置。

    <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>