如何在引导程序中以表单为中心输入？

Posted 2023-03-29

【中文标题】如何在引导程序中以表单为中心输入？

【英文标题】：How center input in form in bootstrap?

【发布时间】：2017-10-11 20:21:48

【问题描述】：

我想要两个输入（登录名和密码）。一比一，各约col-sm-6。如果没有 col-sm-offset-3，我无法将这些输入居中。使用偏移它确实有效，但我想将此输入集中在每个屏幕上。也许我应该在某处添加 .center > 或 margin auto？但是在哪里...

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">

  <div class="row">
    <div class="box">
      <div class="col-lg-12">
        <hr>
        <h4 class="text-center">Logowanie</h4>
        <hr>
        <form method="post" role="form" class="form-horizontal">
           csrf_field() 
          <div class="row">
            <div class="form-group">
              <div class="col-sm-6">
                <input type="email" class="form-control" name="email" placeholder="email">
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-6">
                <input type="email" class="form-control" name="email" placeholder="email">
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

【参考方案1】：

如果你不想使用offset，你可以使用一个居中的类，我称之为.centered，这是你想要居中的内容的包装器。

请看下面的例子：

.centered 
  display: flex;
  align-items: center;
  justify-content: center;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">

  <div class="row">
    <div class="box">
      <div class="col-lg-12">
        <hr>
        <h4 class="text-center">Logowanie</h4>
        <hr>
        <form method="post" role="form" class="form-horizontal">
           csrf_field() 
            <div class="form-group centered">
              <div class="col-sm-6">
                <input type="email" class="form-control" name="email" placeholder="email">
              </div>
            </div>
            <div class="form-group centered">
              <div class="col-sm-6">
                <input type="email" class="form-control" name="email" placeholder="email">
              </div>
            </div>
        </form>
      </div>
    </div>
  </div>
</div>

【参考方案2】：

使用xs 层在所有屏幕上使用偏移量..

http://www.bootply.com/P31H4uF1QG

         <form method="post" role="form" class="form-horizontal">
                     csrf_field() 
                  <div class="form-group">
                    <div class="col-xs-6 col-xs-offset-3">
                      <input type="email" class="form-control" name="email">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-xs-6 col-xs-offset-3">
                      <input type="email" class="form-control" name="email" placeholder="email">
                    </div>
                  </div>
         </form>

另外，不要同时使用row 和form-group，因为form-group 就像row 一样包含col-*

【参考方案3】：

默认情况下，输入在 Bootstrap 中具有 width: 100%。 所以，你需要重写这个样式属性（例如设置width:50%）并添加中心或文本中心类到父元素，它总是会居中。

但我强烈建议您使用列：

 <div class="col-xs-offset-3 col-xs-6 col-md-offset-4 col-md-4">
 <input type="email" class="form-control" name="email" placeholder="email">
 </div>

【参考方案4】：

对所有屏幕使用小偏移量并在此 div 中换行

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="box">
            <div class="col-lg-12">
                <hr>
                <h4 class="text-center">Logowanie</h4>
                <hr>
                <div class="row">
                  <div class="col-sm-offset-3 col-sm-6">
                    <form method="post" role="form" class="form-horizontal">
                         csrf_field() 
                      <div class="form-group">
                        <div class="col-sm-12">
                          <input type="email" class="form-control" name="email" placeholder="email">
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="col-sm-12">
                          <input type="email" class="form-control" name="email" placeholder="email">
                        </div>
                      </div>                        
                    </form>
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>