如何在引导程序中将 3 个有间隙的框居中答案

【问题标题】：How to center 3 boxes with gaps in bootstrap如何在引导程序中将 3 个有间隙的框居中
【发布时间】：2015-01-14 00:29:14
【问题描述】：

我正在尝试将 3 个框居中，它们之间有一点空间（排水沟？），还有页面角落的空间。
我尝试了 class="col-sm-2 col-md-offset-1" （col-sm-2 使它们更小，并为间隙偏移 1），但它并没有真正居中于页面中间，并且同样在移动设备上，每个 col 都被“拉伸”到角落，我不希望这样。有什么想法吗？
谢谢！

【问题讨论】：

请向我们展示您在演示中尝试过的内容。
当然，bootply.com/eHNF5Z2XW8
this怎么样
嗨，Dura，非常感谢，但它仍然不能解决问题。它并没有真正居中，因为右侧框比左侧框更靠近屏幕右侧。当我现在考虑时，网格系统似乎不可能，因为有 12单位，我需要 2 个或 4 个间隙单位，然后我剩下 8 个或 10 个，它们不会除以 3 :)
不确定我是否跟随你：col-md-4 将 12 单位系统分为 3，我认为这是你想要的。检查我的updated demo

标签： html css twitter-bootstrap

【解决方案1】：

你需要text-center

.grid3 >div{
  height: 200px;
  background: rgba(0,0,0,.4);
  float: none;
  display: inline-block;
  background-clip: content-box
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row text-center grid3">
  <div class="col-xs-3">.col-md-4</div>
  <div class="col-xs-3">.col-md-4</div>
  <div class="col-xs-3">.col-md-4</div>
</div>

【讨论】：

谢谢！起初我认为它工作得很好，结果它毁了我的超大屏幕，让它变成了屏幕的 1/3 之类的。
另外，将背景颜色直接应用于列 div 不是一个好主意，因为这会用颜色填充排水沟，这会导致页面上的其他内容无法正确对齐.
@user2105849 只需将div:not(.row) 更改为不同的东西，例如：.grid3 >div 然后在row 元素上添加该类。
@Schmalzy 这只是插图，请参阅更新。

【解决方案2】：

您可以将内容包装在.well 中。然后列的填充将是您的排水沟。此外，如果您希望 3 列居中，则不能使用 .col-sm-3。您必须使用 .col-sm-2 或 .col-sm-4

<div class="col-sm-4">
  <div class="well">
    <h3>Column 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
  </div>        
</div>

http://www.bootply.com/CUbF8SQg8q

【讨论】：

谢谢！我不知道“井”！当我使用 sm-4 时，它对我的愿望来说太大了（但我可以处理它，它仍然很好），但是使用 sm-2 我无法将它放在页面中间。多么n00b :(
@user2105849 要使用.col-sm-2，您需要在第一列使用col-sm-offset-3。这是一个新的例子bootply.com/ejDSNv2DWX
哦，对了，我应该自己考虑一下偏移量，因为我已经在使用它了，多么n00b！无论如何，非常感谢！结果 sm-2 有点小，所以我会坚持使用 4，它看起来很棒！再次感谢！