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 您可以使用表单并从引导文档中一起形成水平类

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

Answer 2

用户@VikasRana已经涵盖了必须完成的工作，但我会详细说明一下。

如果您不知道，Bootstrap由网格系统组成，以系统方式定位您的元素。每行分为12列。您可以查看网格布局here。

对于你的问题：

1）与上面的答案一样，将它包装在类<div class="col-md-8 col-md-offset-2"></div>中并将其包装在<div class="container"></div>内。 container具有每个视口的前缀宽度，因此这样可以使您的表单看起来更短，更中心。您可以看到 demo here 。在移动设备上，最好将表单宽度设置为100％，这样就可以省略用于设计较小视口的col-sm-*类。

2）对于第二个，您可以使用form-inline类在同一行显示<label>和<input>。为了使它们的宽度相等并在它们之间留出间距，你可以将它们包装在col-md-6类中。的 Demo here.

Answer 3

为空格使用2个占位符，并将Bootstrap的权重分配给一行中的所有容器。总加权值必须总计为12，所以请使用2-8-2。

http://getbootstrap.com/examples/grid/

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

3 个答案: