Home / Questions / 15310
Accepted
Ivxn
Asked: 2020-06-29 09:34:57 +0800 CST 2020-06-29 09:34:57 +0800 CST

对齐引导形式

  • 772

我怎样才能使我的引导表单居中，因为一切都在正确的位置，也许我把单元格的大小放错了，这是我的代码

<form class="form-horizontal" style="margin:0 auto">
  <div class="form-group">
    <label class="col-lg-8 control-label">Nombres</label>
    <div class="col-lg-4">
      <input type="text" class="form-control" name="nombre" />
    </div>
  </div>

  <div class="form-group">
    <label class="col-lg-8 control-label">Apellidos</label>
    <div class="col-lg-4">
      <input type="text" class="form-control" name="apellido" />
    </div>
  </div>

  <div class="form-group">
    <label class="col-lg-8 control-label">Correo Electrónico</label>
    <div class="col-lg-4">
      <input type="text" class="form-control" name="email" />
    </div>
  </div>

  <div class="form-group">
    <label class="col-lg-8 control-label">Teléfono Celular</label>
    <div class="col-lg-4">
      <input type="text" class="form-control" name="telefono_cel" />
    </div>
  </div>

  <div class="form-group">
    <div class="">
      <button type="submit" class="btn btn-success left">Registrarse</button>
    </div>
  </div>

</form>

在此处输入图像描述

bootstrap

3 Answers

  1. 您可以尝试如下：

       <div class="text-center">
<form class="form-horizontal">
  <div class="form-group">
    <label class="col-lg-8 control-label">Nombres</label>
    <div class="col-lg-4">
      <input type="text" class="form-control" name="nombre" />
    </div>
  </div>

  <div class="form-group">
    <label class="col-lg-8 control-label">Apellidos</label>
    <div class="col-lg-4">
      <input type="text" class="form-control" name="apellido" />
    </div>
  </div>

  <div class="form-group">
    <label class="col-lg-8 control-label">Correo Electrónico</label>
    <div class="col-lg-4">
      <input type="text" class="form-control" name="email" />
    </div>
  </div>

  <div class="form-group">
    <label class="col-lg-8 control-label">Teléfono Celular</label>
    <div class="col-lg-4">
      <input type="text" class="form-control" name="telefono_cel" />
    </div>
  </div>

  <div class="form-group">
    <div class="">
      <button type="submit" class="btn btn-success left">Registrarse</button>
    </div>
  </div>

</form>
</div>

    或者这样

    <div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<form class="form-horizontal">
  <div class="form-group">
    <label class="col-lg-8 control-label">Nombres</label>
    <div class="col-lg-4">
      <input type="text" class="form-control" name="nombre" />
    </div>
  </div>

  <div class="form-group">
    <label class="col-lg-8 control-label">Apellidos</label>
    <div class="col-lg-4">
      <input type="text" class="form-control" name="apellido" />
    </div>
  </div>

  <div class="form-group">
    <label class="col-lg-8 control-label">Correo Electrónico</label>
    <div class="col-lg-4">
      <input type="text" class="form-control" name="email" />
    </div>
  </div>

  <div class="form-group">
    <label class="col-lg-8 control-label">Teléfono Celular</label>
    <div class="col-lg-4">
      <input type="text" class="form-control" name="telefono_cel" />
    </div>
  </div>

  <div class="form-group">
    <div class="">
      <button type="submit" class="btn btn-success left">Registrarse</button>
    </div>
  </div>

</form>
</div>
<div class="col-lg-4"></div>
</div>

    希望这可以帮到你

    • 1
  2. Best Answer

    使用您的代码，只需使用 Bootstrap 网格即可，因此我将所有列放在 4 中以使其具有居中效果，尽管您也可以col-lg-offset-2在每个中使用该类，label或者您可以使用列排序

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<form class="form-horizontal" style="margin:0 auto">
  <div class="form-group">
    <label class="col-lg-4 control-label">Nombres</label>
    <div class="col-lg-4">
      <input type="text" class="form-control" name="nombre" />
    </div>
  </div>

  <div class="form-group">
    <label class="col-lg-4 control-label">Apellidos</label>
    <div class="col-lg-4">
      <input type="text" class="form-control" name="apellido" />
    </div>
  </div>

  <div class="form-group">
    <label class="col-lg-4 control-label">Correo Electrónico</label>
    <div class="col-lg-4">
      <input type="text" class="form-control" name="email" />
    </div>
  </div>

  <div class="form-group">
    <label class="col-lg-4 control-label">Teléfono Celular</label>
    <div class="col-lg-4">
      <input type="text" class="form-control" name="telefono_cel" />
    </div>
  </div>

  <div class="form-group">
    <div class="">
      <button type="submit" class="btn btn-success left">Registrarse</button>
    </div>
  </div>

</form>

    • 1

  3. 尝试应用对齐方式，它们非常有用，您只需将类放在要对齐的元素中，如下所示：

    <div class="text-center">Centra el contenido del div</div>

    我希望这个对你有用。

    • 1