调整div的大小并使用bootstrap将其居中

Question

我有一个由边框字段集包装的表单，现在所有表单字段都填充了字段集的宽度。我需要一些较短且居中的文本字段。目前我只能使用示例col-md-10来缩短它们，但后来我不知道如何将它们居中，它们保持与左侧对齐。

以下是字段的外观

<div class="form-group">
<label for="planner" class="control-label">form.planner *</label>
<input class="form-control" id="planner" name="planner" type="text">

除了form-group之外，我还尝试添加“col-md-10 center-block”，但这没有用，我还尝试了几种使用span和offset的组合，但没有运气。

下图显示了我拥有的和我想要的内容，我该怎么办？

并非所有字段都必须调整大小，表单会在显示的字段下方继续显示，而其他一些字段必须像现在一样适合字段集的宽度。

Answer 1

使用col-md-10添加课程col-md-offset-1以使col-md-10元素居中。像这样：

<div class="row">
    <div class="col-md-10 col-md-offset-1">
       I'm centered!!
    </div>
</div>

偏移类很好地通过类名的计数来抵消元素，因此对于12列网格，以10 col元素为中心，将其移动到1，因此col-md-offset-1类。

例如，要使col-md-6元素居中，您可以使用col-md-offset-3类将其偏移3列。

Answer 2

您可以使用col-md-offset-x或将另一个类添加到col-md-x类的div中，然后提供这些属性。

.center{
 float:none;
 margin-left:auto;
 margin-right:auto;
}