Html 对中引导输入字段

我对这个很陌生，尤其是引导。我有以下代码：

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

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

走！

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

这不起作用：

“左边距：自动；右边距：自动；”

有人有什么想法吗？

尝试使用以下代码：

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

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

---

如果它不起作用，请使用！重要信息

您可以使用偏移量使列居中显示，只需使用等于行剩余大小一半的偏移量，在您的情况下，我建议使用

col-lg-4

和

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

---

尝试将此样式应用于您的

div class=“input group”

：

---

查看：。

好的，这是我的最佳解决方案。Bootstrap包括mobile first fluid grid系统，随着设备或视口大小的增加，该系统可以适当地扩展到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 -->

走！

意思是4+4+4=12。。。所以第二个div会在中间。

---

示例：

使元素居中的最佳方法是使用

.center block

helper类。但您的引导版本必须不低于3.1.1

走！

对于我来说，此解决方案很好地将输入字段置于TD的中心：

---

对于引导4，请使用偏移量-4，请参见下文

<div class="mx-auto">        
        <form class="mx-auto" action="/campgrounds" method="POST">
            <div class="form-group row">                
                <div class="col-sm-4 offset-4">
                    <input class="form-control" type="text" name="name" placeholder="name">
                </div>
            </div>
            <div class="form-group row">               
                <div class="col-sm-4 offset-4">
                    <input class="form-control" type="text" name="picture" placeholder="image url">
                </div>
            </div>
            <div class="form-group row">
                    <div class="col-sm-4 offset-4">
                        <input class="form-control" type="text" name="description" placeholder="description">
                    </div>
                </div>
            <button class="btn btn-primary" type="submit">Submit!</button>
            <a class="btn btn-secondary"  href="/campgrounds">Go Back</a>
        </form>      
    </div>

提交

响应式网站不需要使用偏移量

将flexbox与资源中心配合使用：

<div class="row d-flex justify-content-center">
  <input></input>
</div>

---

在我的情况下，以下工作很好

<div class="card-body p-2">
  <div class="d-flex flex-row justify-content-center">
     <div style="margin: auto;">
        <input type="text" autocomplete="off"
          style="max-width:150px!important; "
          class="form-control form-control-sm font-weight-bold align-self-center w-25" id="dtTechState">
     </div>
  </div>
</div>

使用bootstrap的容器类。对于bootstrap，使用justify content center。+1 bootstrap为解决问题提供的最佳解决方案。实际上，您的解决方案仅基于

col-lg-4 col-lg-offset-4

（也请修复col-lg-offset-4）。因此，在您的解决方案中，您需要根据

col-

-大小手动计算偏移量。如果计算错误，

text center

将无助于将元素居中，因此在这里它是无用的，因为我在

jsfiddle

中使用了它。等待反馈。@static这是在Bootstrap 3的发行候选期间发布的，然后偏移量没有大小区别，所以小提琴正在使用

col-offset-4

，我不知道为什么我在回答中写了

col-lg-offset-4

，我记得当时文档和实际引导文件之间有一些差异，所以我可能把它们弄混了。@静态我已经更新了答案，我删除了

文本中心

，因为它没有任何用途，因为这里唯一的内容是块元素，我还添加了对偏移方法的更好解释，并提供了一种支持任何列大小的新的居中方法。在较新的引导版本中，没有

col lg offset-[num]

它是用简单的

offset lg-[num]

更改的。您不需要空的

标记，如我在回答中所示，通过使用偏移量避免额外标记的需要只保留中间的div，如下所示：。。。。偏移量基本上是添加您编写的空div…而不必编写它引导的全部要点是。col-lg-3占用3列。将宽度更改为100%会破坏整个过程。这对我使用Bootstrap5.0很有效。我将其应用于输入的

…

。谢谢