在一行BOOTSTRAP中居中col [重复]

Posted 2023-03-05

【中文标题】在一行BOOTSTRAP中居中col [重复]

【英文标题】：Centering col within a row BOOTSTRAP [duplicate]

【发布时间】：2017-04-15 11:46:50

【问题描述】：

我在将列居中放置在一行中时遇到问题。这是我的 html 的样子：

<div class="row">
  <div class="col-sm-12 parent-col">
    <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>
</div>

我已经尝试过：

.parent-col  float: none; margin: 0 auto;  //This did not work
.child-col  float: none; display: inline-block;  //This works, but I then lose responsiveness.
.col-sm-offset-1 on parent-col. //This also works. However, it is not EXACTLY centered. One side is about 4px larger than the other. 

关于我如何或可能为什么我无法集中颜色或保持响应能力的任何其他想法？

【问题讨论】：

你为什么要覆盖引导程序的网格系统？

我假设您指的是覆盖 float 属性。如果你是，那仅仅是因为这是将col 在一行中居中的建议方法。互联网受到这种回应的困扰。所以很明显我想……这是要走的路。如果您对如何解决我的困境有任何建议，我将不胜感激。

引导规则说col-* 只能是row 的孩子，所以你需要在col-sm-12 中直接插入row

【参考方案1】：

Bootstrap 的网格基于 12 列。 12/5 = 2.4，而 bootstrap 并没有那种列宽 :)

选项 #1 - 在每一侧添加 1 列（使用 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>

选项 #2 - 在第一列添加偏移量：

<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-2 child-col col-md-offset-1">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>
</div>

选项#3 - 如果你真的想要我建议不要这样做，你可以覆盖网格系统：

@media (min-width: 768px) 
  .grid-of-10 .col-sm-2 
    width: 20%;
  

<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 grid-of-10">
    <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>
</div>

注意 - 所有的 sn-ps 都应该全屏查看。

【讨论】：

我整天都在和这个作斗争。我有 2x4 列和 1x3 所以我得到了 3 列使用 11 列的行，当然它不是 centered 。关于如何将它们集中在行上的任何想法

通过示例链接到 jsfiddle/codepen，我可能会提供帮助

这解释了它，可能是我遗漏了什么。这个想法是如何将这 3 列居中 在行内。 jsfiddle.net/moplin/4qfrtqd7/3

你总是可以使用非引导 css 的东西，但如果你只想使用引导 - 答案是“不，你不能”。

无论如何，谢谢。这是一个客户限制，所以我必须找到一个修复或让设计师修改第 3 列以占用 4 个列空间而不是 3 个。

【参考方案2】：

如果您试图让子列在父列中居中，您可以将偏移量添加到第一个子列：

<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>

将偏移量放在父列上有效地将 13 列放在该行中，因此您希望子列加起来为 12（1 个偏移量，列中总共 10 个，然后余数将是 1 = 12）