引导行中的内容难以居中答案

【问题标题】：Difficulty centering content in bootstrap row引导行中的内容难以居中
【发布时间】：2014-09-02 01:24:11
【问题描述】：

我在将三个 div 居中放在一行中时遇到了一些问题。它似乎停留在左侧。 This bootply shows the row in question.

如果您使用 firebug 检查行本身，您会注意到该行跨越了页面的大部分，但右侧有很大的间隙。我一直在尝试使左右距离相同，同时保留两个搜索字段和搜索按钮的大小，但没有取得多大成功。

我的搜索产生了以下内容，这似乎无法帮助将两个搜索字段和搜索按钮居中。

任何帮助将不胜感激，谢谢

【问题讨论】：

【解决方案1】：

放

  col-lg-offset-1

在第一个

 <div class="col-lg-4 control-label">

【讨论】：

【解决方案2】：

用3x col-lg-4 代替2 x col-lg-4 + 1x col-lg-2 编码

你在右边有空间，因为行没有满，右边有一个 2/12 的空间。

【讨论】：

【解决方案3】：

这取决于您希望如何“居中”信息。您可以通过将所有三个元素放在col-xs-4 中来使您的内容居中，所有元素都将在lg 屏幕上占用相同数量的空间，它们将是三个跨度，并且它们将居中。

如果您想调整内容的宽度，您可以尝试其他方法。例如，您可以在第一个元素中添加col-lg-offset-1 以将所有内容转移并保持当前宽度不变。 Bootply example here

还有其他解决方案，但这取决于您希望如何显示信息。

【讨论】：

【解决方案4】：

我将使用偏移功能。

col-lg-offset-1

请记住，Bootstrap 是基于 12 个总列。一些数学运算将有助于使项目居中。

【讨论】：