文章/答案/技术大牛

发布

社区首页 >问答首页 >Bootstrap网格系统并排

问Bootstrap网格系统并排
EN

Stack Overflow用户

提问于 2015-11-30 07:29:34

回答 2查看 399关注 0票数 0

我想创建一个右边的容器，它是全宽的。左边的容器是两个容器。

所以左边的容器x是两个容器，顶部和底部。Y会占据右手边的整个空间。我该怎么做呢？

X   Y
X   takes up all the space

下面是一个有两个大容器并排占据整个宽度的容器。

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

html

css

twitter-bootstrap

回答 2

Stack Overflow用户

发布于 2015-11-30 07:47:23

所以，我找到的最简单的方法是在行和列中深入一层。下面是一个例子：

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                 X1 here
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                 X2 here
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                 Y here
            </div>
        </div>
    </div>
</div>

下面是它的一个引导：http://www.bootply.com/q9SCaxVAKB

这将为您提供所需的设置。

票数 1

Stack Overflow用户

发布于 2015-11-30 07:51:39

我认为this就是您想要实现的目标。

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3">X<br>X</div>
    <div class="col-xs-9">
      <div class="row">
        <div class="col-xs-12">Y</div>
        <div class="col-xs-12">Takes up the full width</div>
      </div>
    </div>
  </div>
</div>

您非常接近，但需要嵌套额外的列。查看Nesting columns的文档

如果您自定义了Bootstrap类名称，则需要更新为您自己的名称。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33989414

复制

相似问题

问Bootstrap网格系统并排
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap网格系统并排EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap网格系统并排
EN