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

引导网格系统

引导网格有一定的设置你应该使用。首先创建一个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 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

滑块宽度

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

bootstrap carousel搞砸了自举网格，bootstrap轮播困扰网格系统

1 个答案: