居中引导输入字段 [英] Centering Bootstrap input fields

问题描述

我是这个新的。特别是用bootstrap。我有这个代码：

I am new with this. Especially with bootstrap. I have this code:

<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 -->

我需要将此输入字段和按钮放在页面中央...margin-left：auto; margin-right：汽车;

I need to put this input field and button in center of page... "margin-left: auto; margin-right:auto;" didnt worked... do someone have an idea ?

推荐答案

您可以使用偏移使列出现居中，只需使用偏移量等于行的剩余大小的一半，在你的情况下，我建议使用 col-lg-4 和 col-lg-offset- 4 ，即（12-4）/ 2 。

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-4 with col-lg-offset-4, that's (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

请注意，此技术仅适用于列大小（ .col-X-2 ， .col-X-4 ， col-X-6 。），如果你想支持任何大小，你可以使用 margin：0 auto; 但是你需要从元素中删除float，我推荐一个自定义CSS类以下：

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-centered{
    margin: 0 auto;
    float: none;
}

演示小提琴

Demo fiddle

这篇关于居中引导输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！