居中引导响应列答案

【问题标题】：Centering bootstrap responsive columns居中引导响应列
【发布时间】：2016-02-25 10:14:38
【问题描述】：

我正在寻找将一组响应式引导列居中在一行内的最佳方法。

     <li class="row hazRow">
         //center this to the middle of the row
         <div class="col-xs-3">
             <img class="icon" href="#" title="icon" src="img/table/icon.svg">
         </div>
         <div class="col-xs-4">
             <p>Title</p>
         </div>
         //end center
     </li>

我本来想在两边只使用空白列，但感觉很浪费，并且无法将奇数列宽度（如 7）居中。

我还尝试用.center-block 和.text-center 将列包装在一个div 中，但这并没有改变位置。

我应该为此放弃响应式引导网格吗？
如何使这些列居中？

【问题讨论】：

.center-block 不会将块居中，因为网格使用浮动，它总是将列拉到左边。我最近遇到了这个问题，找不到解决它的好方法。我排序的唯一方法是固定宽度：/
mmmm 螨虫必须尝试固定宽度作为一种解决方法...希望其他人可能知道一种方法'交叉手指'。
<div class="col-xs-3 col-xs-offset-3"> 将在第一列的左侧放置 3 列偏移量。
啊，是的，偏移类，完全忘记了那些！值得使用那些 tbh
偏移仅用于居中偶数/总列，列嵌套和额外的 css 需要在 BS 中居中奇数列

标签： html css twitter-bootstrap

【解决方案1】：

你可以通过稍微借鉴Foundation来实现这一点

正如其他人所建议的，第一步是将您的列嵌套在“外部”列中：

<div class="row">
    <div class="col-xs-7 centered">
        <div class="row hazRow">
            <div class="col-xs-5">
                icon.svg
            </div>
            <div class="col-xs-7">
                <p>Title</p>
            </div>
        </div>
    </div>
</div>

（请注意，外列的宽度为 7，而内列现在加起来为 12）

然后添加css来阻止外列浮动并居中：

.centered {
    float:none;
    margin:0 auto;
}

jsfiddle example

【讨论】：

【解决方案2】：

这是我们使用嵌套行和列类的地方...

<div class="row">
   <div class="col-md-8 col-md-offset-2">
       <div class="row">
           <div class="col-md-4"></div>
           <div class="col-md-8"></div>
       </div>
   </div>
</div>

对于奇数列：（如果您需要 9 列）

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

这将为您提供大约 9 列宽。

【讨论】：

有趣..这仅适用于偶数列宽不？
这适用于中型设备 (md)。对于较小的设备，您可以选择 xs 或 sm。这一切都取决于您的需求。 Bootstrap 提供了这样一个漂亮的网格系统，如果你知道如何使用它的话。然而让我感到难过的是，即使是只有几个月经验的人，也会搞砸它。
如果您知道如何进行实验，您也可以让它适用于奇数列。就是这样，你将不得不嵌套几个 div。纽威斯试一试，实验，它可以与任何东西一起工作，你所需要的只是一个想象力。
例如，如果你只想要 col-9。因此，在这种情况下，您可以拥有偏移量为 1 的父 col-10 并拥有子 col-12。所以父母会在两边给你大约需要的空间，大约看起来像 col-9。
好吧，我投了反对票，尽管我的回答符合他的要求，以最佳方式。它对任何列、行或引导列和行都是通用的（就像您使用引导程序一样）。

【解决方案3】：

试试这个...

    <div class="col-xs-6 text-right">
         <img class="icon" href="#" title="icon" src="img/table/icon.svg">
     </div>
     <div class="col-xs-6 text-left">
         <p>Title</p>
     </div>

【讨论】：

问题不希望您定义要使用的内部列。该解决方案应该对行内添加的任何列都是通用的。