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

On webpage it looks like this
我需要将此输入字段和按钮放在页面中心...“margin-left：auto; margin-right：auto;”没有工作......有人有想法吗？

Answer 1

您可以使用偏移量使列显示为居中，只需使用等于行剩余大小一半的偏移量，在您的情况下，我建议您将col-lg-4与col-lg-offset-4一起使用，即{ {1}}。

(12-4)/2

<强> Demo fiddle

请注意，此技术仅适用于偶数列大小（<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> </div> </div>，.col-X-2，.col-X-4等...），如果您想支持任何可以使用的大小{{ 1}}但你需要从元素中删除浮点数，我推荐一个自定义的CSS类，如下所示：

col-X-6

<强> Demo fiddle

Answer 2

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

Answer 3

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

text-align:center;

查看它：Fiddle。

Answer 4

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

Answer 5

尝试使用此代码：

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

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

Answer 6

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

＆＃13;

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

＆＃13;

Answer 7

对于引导程序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>

Answer 8

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

使用带有证明内容中心的Flexbox：

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

Answer 9

在我看来，以下工作正常

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

Answer 10

在 b4 中你也可以使用 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>

居中引导输入字段

10 个答案: