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