html - Twitter Bootstrap/Unify 中心变量图像

Question

我想创建一个内容居中的号召性用语框

该框包含两行第一行是标题，第二行是可变数量的图片，最多 12 张(如果大于，则为三行或更多行)。

文本使用 .text-center 完美居中。但是我无法创建具有内容宽度的 div。

我现在拥有的:

<div class="container">
    <div class="row">
        <div class="col-md-12" style=" padding: 10px 0 0;">
            <div class="row text-center">
                <div class="col-md-12 animated fadeInLeft">
                    <span class="color-green">Title</span>
                </div>
            </div>
            <div class="row text-center">
                <div class="col-md-9 center-block">
                    <!-- Content / Images-->
                </div>
            </div>
        </div>
    </div>
</div>

我尝试了多种设置，但中心 block 似乎没有将 col-md-9 放在中间。 (即使它确实适用 margin: 0 auto;)

我该怎么做才能在其容器的中心创建宽度可变的等宽图像。我正在使用基于 Twitter Bootstrap 3 的统一模板

Answer 1

自 text-center影响 inline仅 -level elements(children)，您需要使它们内联。天气晴朗。所以你只需要制作<div class="col-md-9 center-block">排队。这样做:

.center-block {
  display: inline-block;
  float: none;
}

如果你想在没有 javascript 的情况下在一行中推送不超过 12 张图像，我认为唯一的方法是:

.center-block img {
  width: 8.2%;
}