html - 使用 bootstrap 3 对齐表单元素的网格系统

Question

<?php echo form_open('secure/register', 'class="form"', 'role="form"'); ?>
<div class="page-header">
    <h2><?php echo lang('reg_title'); ?></h2>
</div>
<div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
    <div class="text-center">
        <button type="submit" name="submit" class="btn btn-primary"><?php echo lang('register_btn'); ?></button>
    </div>
</div>
<?php echo form_close(); ?>

这是我为注册创建的表格。

它现在的布局是这样的:

Email
_________________________
Password
_________________________
          [Reg]

它占用容器内部宽度的 100%。

所以问题是

1) 我怎样才能使表单变小并居中对齐，比如说，只占容器宽度的 60%？然后左边有20%的空白，右边有20%的空白

2) 另外，如何在这种布局中创建表单？

Email
_________________________
Password
_________________________
Contact
FirstName___ LastName____
          [Reg]

感谢帮助

Answer 1

将你的 div 包装成一个 div，比如

<div class="col-md-8 col-md-offset-2">
<div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
    <div class="text-center">
        <button type="submit" name="submit" class="btn btn-primary"><?php echo lang('register_btn'); ?></button>
    </div>
</div>
</div>

这使您的表单居中对齐，宽度为 66.6%，每边边距为 16.7%。如果你也想在小型农场中使用它，而不是添加类 col-sm-8 col-sm-offset-2 。

对于你的第二个问题，你可以使用内嵌形式或水平形式。更多信息 Read here 您可以从 bootstrap 文档中一起使用 form 和 form horizo​​ntal class

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
</form>