Bootstrap: Centering col

I feel like this is a very weird question but I couldn't seem to find a solution online.

If I have a col-md-5 , I can't seem to center it. As far as I understood the grid system, if I choose a column size (1-12), in order to control the position of the column I use col-##-offset-#.

So if I have a col-md-4 , I would use col-md-offset-4 to push it 4 columns from the left, and then it will be centered. The idea is that, to center a column, there must be the same amount of columns within the grid from the left of it and from the right of it.

Now, what if I have a, let's say, col-md-5 ? How can I center it? Doing something like col-md-4 will leave 3 from the right. I tried several things but no success.

Thanks in advance.

---

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

---

Twitter bootstrap applies float property on columns col-*-# . First, we need to override that by re-setting float to none for a specific column.

Then we can give the column a margin-left / right of auto to align it to center horizontally — 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>

---

Best bet is to make your own rule for this, create a 4.5 offset.

left margin = (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>

链接地址: http://www.djcxy.com/p/88500.html

上一篇: 激活/停用Laravel中的多个客户端

下一篇: Bootstrap：中心