Centering col within a row BOOTSTRAP

This question already has an answer here:

Center a column using Twitter Bootstrap 3 28 answers

---

If you are trying to get the child columns centered in the parent column, you can add the offset to the first child column:

<div class="row">
  <div class="col-sm-12">
    <div class="row">
      <div class="col-sm-offset-1 col-sm-2">itemOne</div>
      <div class="col-sm-2">itemTwo</div>
      <div class="col-sm-2">itemThree</div>
      <div class="col-sm-2">itemFour</div>
      <div class="col-sm-2">itemFive</div>
    </div>
  </div>
</div>

Putting the offset on the parent column effectively puts 13 columns in that row so you want to make the child columns add up to 12 (1 offset, 10 total in the columns, then the remainder which will be 1 = 12)

---

Bootstrap's grid is based on 12 columns. 12/5 = 2.4, and bootstrap doesn't really have that kind of columns-width :)

Option #1 - add 1 column on each side (using col-sm-1 ).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-sm-12 parent-col">
    <div class="col-sm-1 child-col"></div>
    <div class="col-sm-2 child-col">itemOne</div>
    <div class="col-sm-2 child-col">itemTwo</div>
    <div class="col-sm-2 child-col">itemThree</div>
    <div class="col-sm-2 child-col">itemFour</div>
    <div class="col-sm-2 child-col">itemFive</div>
    <div class="col-sm-1 child-col"></div>
  </div>
</div>

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

上一篇: Bootstrap：中间内容？

下一篇: 在一行BOOTSTRAP中居中排列