Html 居中 Bootstrap 输入字段

Centering Bootstrap input fields

提问by Ivan Vulovi?

I am new with this, especially with Bootstrap. I have this code:

我是新手，尤其是 Bootstrap。我有这个代码：

<div class="row">
    <div class="col-lg-3">
       <div class="input-group">
         <input type="text" class="form-control">
         <span class="input-group-btn">
             <button class="btn btn-default" type="button">Go!</button>
         </span>
       </div><!-- /input-group -->
    </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

I need to put this input field and button in the center of the page:

我需要将此输入字段和按钮放在页面中央：

This didn't work: "margin-left: auto; margin-right:auto;"

这不起作用： "margin-left: auto; margin-right:auto;"

Does anyone have any ideas?

有没有人有任何想法？

回答by koala_dev

You can use offsets to make a column appear centered, just use an offset equal to half of the remaining size of the row, in your case I would suggest using col-lg-4with col-lg-offset-4, that's (12-4)/2.

您可以使用偏移量使列显示居中，只需使用等于行剩余大小一半的偏移量，在您的情况下，我建议使用col-lg-4with col-lg-offset-4，即(12-4)/2.

<div class="row">
    <div class="col-lg-4 col-lg-offset-4">
        <div class="input-group">
            <input type="text" class="form-control" /> 
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">Go!</button>
            </span>
        </div><!-- /input-group -->
    </div><!-- /.col-lg-4 -->
</div><!-- /.row -->

Demo fiddle

演示小提琴

Note that this technique only works for even column sizes (.col-X-2, .col-X-4, col-X-6, etc...), if you want to support any size you can use margin: 0 auto;but you need to remove the float from the element too, I recommend a custom CSS class like the following:

请注意，此技术仅适用于偶数列大小（.col-X-2、.col-X-4、col-X-6等...），如果您想支持可以使用的任何大小，margin: 0 auto;但您也需要从元素中删除浮动，我建议使用自定义 CSS 类，如下列的：

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

Demo fiddle

演示小提琴

回答by gsubiran

Try applying this style to your div class="input-group":

尝试将此样式应用于您的div class="input-group"：

text-align:center;

View it: Fiddle.

查看它：Fiddle。

回答by Shwan Namiq

The best way for centering your element it is using .center-blockhelper class. But must your bootstrap version not less than 3.1.1

将元素居中的最佳方法是使用.center-block辅助类。但是你的bootstrap版本必须不低于3.1.1

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" />
<div class="row">
  <div class="col-lg-3 center-block">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
             <button class="btn btn-default" type="button">Go!</button>
         </span>
    </div>
    <!-- /input-group -->
  </div>
  <!-- /.col-lg-6 -->
</div>
<!-- /.row -->

回答by Cagy79

For me this solution worked well to center an input field in a TD:

对我来说，这个解决方案可以很好地将输入字段集中在 TD 中：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" />
<td style="background:#B3AEB5;">
  <div class="form-group text-center">
    <div class="input-group" style="margin:auto;">
      <input type="month" name="p2" value="test">
    </div>
  </div>
</td>

回答by Ivan Vulovi?

Ok, this is best solution for me. Bootstrap includes mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. So this worked perfectly on every browser and device:

好的，这对我来说是最好的解决方案。Bootstrap 包括移动优先的流体网格系统，随着设备或视口大小的增加，它可以适当地扩展到 12 列。所以这在每个浏览器和设备上都能完美运行：

        <div class="row">
            <div class="col-lg-4"></div>
            <div class="col-lg-4">
                <div class="input-group">
                    <input type="text" class="form-control" /> 
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                    </span>
                </div><!-- /input-group -->
            </div><!-- /.col-lg-4 -->
            <div class="col-lg-4"></div>
        </div><!-- /.row -->

It means 4 + 4 + 4 =12... so second div will be in the middle that way.

这意味着 4 + 4 + 4 =12... 所以第二个 div 将在中间。

Example: http://jsfiddle.net/jpGwm/embedded/result/

示例：http: //jsfiddle.net/jpGwm/embedded/result/

回答by RDK

Try to use this code:

尝试使用此代码：

.col-lg-3 {
  width: 100%;
}
.input-group {
   width: 200px; // for exemple
   margin: 0 auto;
}

if it didn't work use !important

如果它不起作用，请使用 !important