0

我正在使用 bootstrap3，我想要实现的目标如下：

我有一个宽度为 100% 的大 div

.bigdiv { width: 100% }

在那个 bigdiv 中，我想放 4 个小 div。宽度相同，但其中一个高度不同。

我希望这 4 个 div 必须在 .bigdiv div 中居中对齐（水平）。但是，如果我调整窗口大小，那么它们应该向下流动并相互堆叠，但仍然在中心对齐。为了在调整窗口大小时流畅地堆叠，我尝试过float:left，但这并没有给出所需的视图。

在调整大小之前和之后，我很难将这些小 div 保持在中心。请参阅说明可能方案的附加图像 在此处输入图像描述 在此处输入图像描述在此处输入图像描述在此处输入图像描述 任何帮助将不胜感激。

4

2 回答 2

1

检查有关网格的引导文档...要使您的 bigdiv 中的 div 居中，您必须添加一个带有 class: .container 的 div 并在其中添加一个带有 class 行的 div，然后是您的 cols... 像这样：

<div class="bigdiv">
    <div class="container">
        <div class="row">
            <div class="col-md-3">Col 1</div>
            <div class="col-md-3">Col 2</div>
            <div class="col-md-3">Col 3</div>
            <div class="col-md-3">Col 4</div>
        </div>
    </div>
</div>

请记住，引导程序使用 12 列网格，因此请根据需要替换 col-lg-3 中的数字。

演示：http: //jsfiddle.net/gaSJR/

于 2013-10-29T06:16:53.887 回答
1

这可以display: inline-block在子级和text-align:center父级中轻松实现：

HTML

<div class="bigdiv">
    <div class="smalldiv"></div>
    <div class="smalldiv"></div>
    <div class="smalldiv"></div>
    <div class="smalldiv"></div>
</div>

CSS

.bigdiv {
    text-align:center;
}

.smalldiv{
    width: 100px;
    height: 100px;
    background: red;
    display: inline-block;
}

.smalldiv:nth-child(3){
    height: 200px;
}

演示小提琴

于 2013-10-29T06:23:13.510 回答