Question

我有一个包含可变数量div的Bootstrap行，它们需要相对于其父行居中。到目前为止html设置如下：

<div class="row proj-container">

    <div class="proj col-md-4 col-xs-12"></div>

</div>

使用javascript我克隆并在.proj-container内附加一个可变数量的.proj。它工作正常，如果.proj大于3，由于网格配置，它们正确地包装到其他行上。我无法实现的是将这组div放在其父级内部。

分配＆＃34; .text-center＆＃34;父母没有工作
text-align on parent和inline-block on children does not work
使父母弯曲和对齐：空间周围实现了孩子的居中，但覆盖了网格系统（col-md-4），如果超过三个或更小的设备，他们不会包裹......

有关如何设计样式以实现div的居中和包装的任何想法？

Answer 1

您可以尝试以下应将网格列居中的

.project-container {
   text-align: center; /* set all inline elements to be centered */
}

.project-container .proj {
  display: inline-block; /* set the columns to inline blocks so they are centered */
  float: none;
}

Answer 2

这是另一个解决方案。请看jsFiddle。

.proj {
  display: inline-block;
  height: 10px;
  border: 1px solid red;
  margin: 0 -2px;
  float: none;
}

<强> HTML：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row proj-container text-center">
    <div class="proj col-md-4 col-xs-12"></div>
    <div class="proj col-md-4 col-xs-12"></div>
    <div class="proj col-md-4 col-xs-12"></div>
    <div class="proj col-md-4 col-xs-12"></div>
    <div class="proj col-md-4 col-xs-12"></div>
  </div>
</div>

中心n-divs排（Bootstrap）

2 个答案: