css - Bootstrap CSS : center any col- that overflows a line

Question

在this fiddle中可以看出，我有一系列嵌套在一行中的列，并设计为根据需要溢出到尽可能多的新行上。

由于每个 col-* 都具有来自 Bootstrap 的属性 align: left;，溢出到新行的列保持左对齐。

在视觉上，我希望“不完整”的行具有居中的 div，例如 this fiddle .但是，这些 col- div 是动态创建的，所以我不能只使用 offset 或额外的 row 来修复。

关于如何实现这个的任何想法？提前致谢。

Answer 1

非常简单。首先，您更改 HTML 并添加一些特殊类，以确保不会影响布局其他位置的列。由于您有 app-style，我们将其用于该行，并将 myCentre 类名称添加到 xs-4 列。像这样:

<div class="row app-style">
    <div class="col-xs-4 myCentre">
        <div class="box-btn-reports">
            <p>1</p>
        </div>
    </div>
    <div class="col-xs-4 myCentre">
        <div class="box-btn-reports">
            <p>2</p>
        </div>
    </div>
    <div class="col-xs-4 myCentre">
        <div class="box-btn-reports">
            <p>3</p>
        </div>
    </div>
    <div class="col-xs-4 myCentre">
        <div class="box-btn-reports">
            <p>4</p>
        </div>
    </div>
</div>
<div class="row app-style">
    <div class="col-xs-4 myCentre">
        <div class="box-btn-reports">
            <p>1</p>
        </div>
    </div>
    <div class="col-xs-4 myCentre">
        <div class="box-btn-reports">
            <p>2</p>
        </div>
    </div>
    <div class="col-xs-4 myCentre">
        <div class="box-btn-reports">
            <p>3</p>
        </div>
    </div>
    <div class="col-xs-4 myCentre">
        <div class="box-btn-reports">
            <p>4</p>
        </div>
    </div>
    <div class="col-xs-4 myCentre">
        <div class="box-btn-reports">
            <p>Another col just because I can</p>
        </div>
    </div>
</div>

现在，我们可以使用一些非常简单的 CSS。基本上，我们正在删除 Bootstrap 样式以使用旧式响应式方法:text-align:center 用于容器，text-align:left 用于元素元素，没有什么新东西:

.app-style{text-align:center;}
.myCentre{display:inline-block;
    float:none;
    text-align:left;
    margin-right:-4px; 
    vertical-align:top;}
.box-btn-reports {
  text-align: center;
  width: 100%;
  margin-top: .5em;
  margin-bottom: .5em;
  border: 1px solid #888888;
    border-radius: 8px;}
  p {
    padding: .1em;
    font-size: 1.25em;
    line-height: 150%;
  }

现在您可以 [see the fiddle here]以及这些列如何愉快地居中 1