引导网格与引导旋转木马混淆，引导旋转木马困扰网格系统。

Question

这就是我想做的。我想要自举旋转木马有-sm-8。我想放一张表，上面写着最高级的故事。然后在这两个人下面。我想要三个包含类别列表的col-sm-4。我遇到的问题是旋转木马入侵。它应该以-sm-8结束它的空间，但它无论如何都会到达那里。另外，我也不知道如何在顶部部分有col 8和col 4。下面是我试过的是把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

引导网格系统

引导网格有您应该使用的特定设置。首先创建一个container，既可以用.container修复，也可以用流体(从左到右) .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演示

你可以在自举栅格游戏攻略上读到它。

采用网格系统

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

<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演示2

滑块宽度

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