html - 带有 Bootstrap 轮播的 Bootstrap 网格搞砸了， Bootstrap 轮播打扰了网格系统

Question

这就是我想要做的。 我希望 bootstrap carousel 有 col-sm-8。我想在 col-sm-4 中放一张显示头条新闻的表格。 然后在这两个下面。我想要三个包含类别列表的 col-sm-4。 我遇到的问题是旋转木马侵入了 col-sm-4。它应该在 col-sm-8 中结束它的空间，但它以任何方式到达那里。此外，我不确定如何在顶部设置 col-sm-8 和 col-sm-4。及以下 col-sm-4 col-sm-4 col-sm-4。我尝试的是将 div 放在顶部。和下面部分的一个 div。但这不起作用。由于我是菜鸟，我将不胜感激任何建议或帮助。谢谢。

<div>
<div class="col-sm-8">
<div class='carousel slide' id="myCarousel" style="width:1400px; margin:0 auto">

    <ol class="carousel-indicators">
        <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
<li class="active" data-slide-to="1" data-target="#myCarousel"></li>
<li class="active" data-slide-to="2" data-target="#myCarousel"></li>
    </ol>


    <div class="carousel-inner">
        <div class="item active" id="slide1">
                                <img src = "http://i.imgur.com/SQ691ZO.jpg" />

            <div class="carousel-caption">
                <h4>hello</h4>
                <p>hi you</p>
            </div>
        </div>

    <div class="item" id="slide2">
                            <img src = "http://i.imgur.com/SQ691ZO.jpg" />

            <div class="carousel-caption">
                <h4>hello</h4>
                <p>hi you</p>
            </div>
        </div>

    <div class="item" id="slide3">
                            <img src = "http://i.imgur.com/SQ691ZO.jpg" />

            <div class="carousel-caption">
                <h4>hello</h4>
                <p>hi you</p>
            </div>
        </div>
        </div>

<a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>


</div>
</div>
<div class=col-sm-4>
    hello you
</div>
</div>

<div>
<div class=col-sm-4>
    category one
</div>
<div class=col-sm-4>
    category two
</div>
<div class=col-sm-4>
    category three
</div>

Answer 1

Bootstrap 网格系统

bootstrap 网格具有您应该使用的特定设置。首先创建一个 container，这可以用 .container 或 fluid(从左到右).container-fluid 固定.

在容器内，您可以创建 .row，以在其中嵌套列。

满足您需求的基本设置可能是:

<div class="container">
  <div class="row">
    <div class="col-xs-8">8 Columns</div>
    <div class="col-xs-4">4 Columns</div>
  </div>
  <div class="row">
    <div class="col-xs-4">3 Columns</div>
    <div class="col-xs-4">3 Columns</div>
    <div class="col-xs-4">3 Columns </div>
  </div>
</div>

JSFIDDLE DEMO

您可以在 bootstrap grid introduction 上阅读相关信息.

---

采用网格系统

如果您将其改编为您的代码，它可能如下所示:

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <div class='carousel slide' id="myCarousel">
         <!--slider content -->
      </div>
    </div>
    <div class=col-sm-4>
      hello you
    </div>
  </div>
  <!--.row-->

  <div class="row">
    <div class=col-sm-4>
      category one
    </div>
    <div class=col-sm-4>
      category two
    </div>
    <div class=col-sm-4>
      category three
    </div>
  </div>
</div>
<!--.container-->

JSFIDDLE DEMO 2

---

slider 宽度

要修复变得太大的 slider ，您必须从其 div 中删除 style="width:1400px; margin:0 auto"。之后它应该会自动调整其大小。