Question

我觉得这是一个非常奇怪的问题，但我似乎无法在网上找到解决方案。

如果我有一个col-md-5，我似乎无法集中注意力。据我了解网格系统，如果我选择列大小（1-12），为了控制列的位置，我使用col - ## - offset - ＃。

因此，如果我有col-md-4，我会使用col-md-offset-4从左侧推送4列，然后它将居中。我们的想法是，要使列居中，从左侧和右侧的网格中必须有相同数量的列。

现在，如果我有一个，比方说col-md-5怎么办？我该如何居中呢？做col-md-4之类的事情会从右边留下3。我尝试了几件事但没有成功。

提前致谢。

Answer 1

<div class="col-md-10 col-md-offset-1">
    <div class="col-md-6 col-md-offset-3">
    </div>
</div>

Answer 2

Bootstrap 4

在Bootstrap 4中，只需mx-auto即可自动左/右边距...

<div class="container">
  <div class="row">
     <div class="col-sm-5 mx-auto">
        Centered
    </div>
  </div>
</div>

Answer 3

Twitter引导程序在列float上应用col-*-#属性。首先，我们需要通过为特定列重新设置float到none来覆盖它。

然后，我们可以为列margin-left / right auto添加一列，使其与水平居中对齐 - Example Here 。

@media (min-width: 992px) {
  .col-md-center {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-md-5 col-md-center">
    <!--                 ^-- Added class name
     --> ...
    </div>
  </div>
</div>

Answer 4

最好的办法是为此制定自己的规则，创建一个4.5偏移。

左边距=（100/12）*（12-5）/ 2 = 29.175％

.col-xs-5 {
  background-color: red;
}
.col-xs-offset-4_5 {
  margin-left: 29.175%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-xs-12">
    <div class="row">
      <div class="col-xs-5 col-xs-offset-4_5">.col-xs-5</div>
    </div>
  </div>
</div>

或者你可以这样使用6列，但是通过在每一侧添加halv一列填充来删除1列。

.col-xs-6.morepadding {
  padding: 0px 4.16%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-xs-12">
    <div class="row">
      <div class="col-xs-6 col-xs-offset-3 morepadding">.col-xs-6 with half the width of a column as padding on each side</div>
    </div>
  </div>
</div>

Answer 5

看一下这篇文章和最佳答案： Center a column using Twitter Bootstrap 3

具体而言＃34;方法＃2＆＃34;，我认为你正在寻找

小提琴：http://jsfiddle.net/85oy836u/1/

<div class="container">
<div class="row text-center">
    <div class="col-xs-5" style="float: none; margin: 0 auto; background: green;">col-xs-5</div>
</div>
    </div>

Answer 6

你可以试试这个

.col-centered {
display:inline-block;
float:none;
}

这是<{p>}的html

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

这只是一般的想法，但这里是我在网上发现的example。

Answer 7

尝试添加类text-center，如下所示：

 <div class="row">
<div class="col-md-12 text-center">
BLABLA
</div>
</div>

此解决方案也适用于col-md-5

Bootstrap：居中col-md-5？

7 个答案: