Question

我正在使用bootstrap，我有一个带登录表单的容器。

但是，我想将此表单与页面左侧对齐。但是，使用float left会使它看起来很难看，也会使表单输入变小，如下所示：

<div class="container">
    <div class="form-container">
      <form class="form-horizontal" name="form" role="form" >
        <fieldset>
          <div class="form-group">
            <div class="btn-icon-lined btn-icon-round btn-icon-sm btn-default-light">

            </div>
            <input type="email" class="form-control input-lg input-round text-center" placeholder="Email" ng-model="user.email" name="email" ng-required autofocus>
          </div>
          <div class="form-group">
            <div class="btn-icon-lined btn-icon-round btn-icon-sm btn-default-light">

            </div>
            <input type="password" class="form-control input-lg input-round text-center" placeholder="Password">
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-primary btn-lg btn-round btn-block text-center">Log in</button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>

我怎样才能使表格输入到左侧而不显眼？

Answer 1

要做引导方式。您可以在表单<div class="form-container text-center col-xs-3">

中添加列宽

这是您的原始示例整理了一点http://codepen.io/anon/pen/XXbKvN

Bootstrap使用12列网格系统，以便在页面上很好地布置所有内容。有关详细信息，请查看http://getbootstrap.com/css/#grid-options

Answer 2

您可以width: 350px;使用.form-container课程。

如果您可以上传您的设计，那就更好了。屏幕截图。

屏幕左侧的bootstrap容器内容？

2 个答案: