bootstrap CSS：居中任何溢出一行的 col-答案

【问题标题】：bootstrap CSS: center any col- that overflows a linebootstrap CSS：居中任何溢出一行的 col-
【发布时间】：2014-09-09 12:02:57
【问题描述】：

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

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

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

关于如何做到这一点的任何想法？提前致谢。

【问题讨论】：

标签： css twitter-bootstrap less

【解决方案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

【讨论】：

谢谢！我从来没有想过这个。