居中Bootstrap输入框

Question

我对这个很新，特别是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 -->

我需要将这个输入框和按钮置于页面中央：

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

有人有什么想法吗？

- Ivan Vulović

---

使用Bootstrap的容器类。 - Ayush

使用Bootstrap时，请使用justify-content-center。 - TheGhoul

Answer 1

可以使用偏移量使列居中，只需使用偏移量等于行剩余大小的一半即可。在您的情况下，我建议使用 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 -->

演示代码

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

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

演示代码

- omma2289

---

+1 Bootstrap提供的最佳解决方案，用于解决问题的目的。 - lvarayut

实际上，您的解决方案仅基于 col-lg-4 col-lg-offset-4（请同时修复 col-**lg**-offset-4）。因此，在您的解决方案中，您需要根据 col- 大小手动计算偏移量。如果计算错误，则 text-center 将无法帮助将元素居中，因此在此处它是无用的，就像我在 jsfiddle 中测试时一样。等待反馈。 - static

@static 这是在 Bootstrap 3 的 Release Candidate 阶段发布的，当时没有偏移量的大小区别，所以这个 fiddle 是使用 col-offset-4 工作的。我不知道为什么在我的回答中我写了 col-lg-offset-4，但我记得当时文档和实际的 Bootstrap 文件之间存在一些差异，所以有可能我搞混了它们。 - omma2289

@static 我已更新我的答案，我删除了 text-center，因为它没有任何作用，因为这里唯一的内容是块元素，我还提供了更好的偏移方法的解释，并提供了一种支持任何列大小的新居中方法。 - omma2289

在更新的 Bootstrap 版本中，没有 col-lg-offset-[num] 这个类，它被简单的 offset-lg-[num] 取代了。 - Ivanp

Answer 2

在响应式网站中，不建议使用偏移量。

使用 justify-content: center 的 flexbox：

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

- Phong Phuong

---

这对我在Bootstrap 5.0上起了作用。我将其应用于我的输入所在的<div class="form-group">...</div>。谢谢！ - Curt Keisler

Answer 3

使用 .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 -->

- Shwan Namiq

Answer 4

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

text-align:center;

查看它：Fiddle。

- gsubiran

Answer 5

好的，对于我来说这是最佳解决方案。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 -->

这意味着4 + 4 + 4 = 12……所以第二个div将处于中间位置。

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

- Ivan Vulović

---

你不需要空的<div>标签，使用我在答案中展示的偏移量来避免需要额外的标记。 - omma2289

只需保留中间的div，像这样：<div class="col-lg-4 col-lg-offset-4">....</div> Offset基本上会添加你编写的空div...而无需编写它。 - ganders

Answer 6

对于我来说，这个解决方案在将输入字段居中于 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>

- Cagy79

Answer 7

尝试使用以下代码：

尝试使用以下代码：

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

如果没有生效，请使用 !important。

- RDK

---

不过，Bootstrap 的重点在于 .col-lg-3 占用了3列。将宽度更改为100％会破坏整个结构。 - Mirror318

Answer 8

在我的情况下，以下内容正常工作。

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

- NoWar

Answer 9

对于Bootstrap 4，请使用offset-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>

- azam1417

Answer 10

在使用之前，你也可以使用 d-flex justify-content-center

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group">
                
    <div class="d-flex justify-content-center">
    
    <input type="text" class="form-control">
    
     <span class="input-group-btn">
         <button class="btn btn-default" type="button">Go!</button>
     </span>
     
    </div>      
        
</div>

- Italo Hernández