在一行中居中col BOOTSTRAP

我在将一列中的行集中在一起时出现问题。这里是我的html的样子：在一行中居中col BOOTSTRAP

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

我已经attemtped：

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

任何其他的想法如何或可能是为什么我不能山坳居中或保留的反应？

来源

2016-12-01 Nappstir

你为什么压倒bootstrap的网格系统？ – Dekel

我假设你指的是覆盖'float'属性。如果你是，这只是因为这是一个建议的方法，在一个行内居中'col'。互联网是与这个回应混合在一起的。所以很明显，我想......这是要走的路。如果您有关于如何完成我的困境的建议，我将不胜感激。 – Nappstir

Bootstrap规则指出'col- *'只能是'row'的孩子，所以你需要在'col-sm-12'内直接插入'row'。 – DavidG

如果你试图让父列居中的孩子列，您可以添加偏移到第一子列：

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

来源

2016-12-01 00:19:22 Beno

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>

注 - 所有片段应该在全屏观看。

来源

2016-12-01 00:22:49 Dekel

在一行中居中col BOOTSTRAP

回答

相关问题