Question

我想将我的引导列放在中心位置。我可以使用offsets：

这样做

<div class="row">
    <div class="col-lg-2 col-sm-4 col-xs-6  col-lg-offset-3">Col1</div>
    <div class="col-lg-2 col-sm-4 col-xs-6">Col 2</div>
    <div class="col-lg-2 col-sm-4 col-xs-6 col-xs-offset-3 col-sm-offset-0 ">Col 3</div>
</div>

但是，列数是数据驱动的，因此我无法提前知道正确的偏移量。是pull-center还是类似的？

Answer 1

覆盖使.col-*浮动的默认引导样式，使其成为display: inline-block;，然后将text-align: center;应用于父元素

＆＃13;

[class^="col-"],
[class*=" col-"] {
  float: none !important;
  display: inline-block;
}
.row {
  text-align: center;
  background-color: #ddd;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-lg-2 col-sm-4 col-xs-6  col-lg-offset-3">Col1</div>
</div>
<div class="row">
  <div class="col-lg-2 col-sm-4 col-xs-6">Col 2</div>
  <div class="col-lg-2 col-sm-4 col-xs-6">Col 2</div>
</div>
<div class="row">
  <div class="col-lg-2 col-sm-4 col-xs-6 col-xs-offset-3 col-sm-offset-0 ">Col 3</div>
</div>

＆＃13;

Answer 2

我编写了一个算法来计算适当的偏移量：

function boostrap_calc_offset($ind, $nb_total, $nb_per_row) {
    $offsets = array();
    foreach ($nb_per_row as $size => $n) {
        $offsets[$size] = 0;

        if ($ind % $n == 0) {
            if ($nb_total - $ind - $n > 0)
                $in_this_row = $n;
            else 
                $in_this_row = $nb_total - $ind;

            if ($in_this_row < $n) {
                $o = (12 - (12 / $n) * $in_this_row) / 2;
                $offsets[$size] = $o;
            }
        }
    }

    $offset = '';
    foreach ($offsets as $size => $o) {
        $offset .= ' col-' . $size . '-offset-' . $o;
    }

    return $offset;
}

如何使用它：

$nb_per_row = array('lg' => 6, 'sm' => 3, 'xs' => 2);
$nb = count($data);

$i = 0;
foreach ($data as $datum) {
    $content .= '<div class="col-lg-2 col-sm-4 col-xs-6 ' . boostrap_calc_offset($i, $nb, $nb_per_row) .'">...</div>';
    $i++;
}

居中任意数量的引导列

2 个答案: