如何在bootstrap中居中div列

Question

我有一个bootstrap div，根据条件可能有3列或2列或1列。由于列数较少，我需要将它们放在外部div中。我怎样才能实现它？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="col-lg-12">
    <div class="col-lg-4">1</div>
    <div class="col-lg-4">2</div>
    <div class="col-lg-4">3</div>
    
    </div>

根据条件，我可能只有div 1和2，或者只有1或1,2,3。有什么方法可以让我总是把div的位置放在中心而不管列？而不是将它们浮动到左侧

Answer 1

为要居中的行添加一个特殊类..

.row.col-centered > [class*='col-'] { 
    display: inline-block;
    float: none;
}

http://www.codeply.com/go/p2L9Q6NKip

Answer 2

在外部div上使用Bootstrap的text-center类：

<div class="col-lg-12 text-center">

Answer 3

这将更容易。这将适用于所有地方。

CSS：

.col-lg-4 {
  margin: 0 auto;
}

或者你可以使用flexbox（但我认为没有理由在这里使用它）。

.col-lg-12 {
  display: flex;
  justify-content: center;
}