引導程序對齊問題

Question

我正在嘗試學習Bootstrap的可能性，但是在對齊登錄表單時遇到了麻煩：

<form name="signup" class="span8 form-inline" ng-submit="signup.$valid && IsSubmitEnabled && loginController.validateLogin(utilisateur)" novalidate>

        <div class="row">
            <label class="control-label span1" for="username"  >{{ 'HOME_LOGIN_CONTENT_USERNAME' | translate }} : </label>
            <input class="form-control span7"  ng-model="utilisateur.login" Name="username" placeholder="{{ 'HOME_LOGIN_CONTENT_USERNAME' | translate }}" type="text" required/>
        </div>

        <div class="row">   
            <label class="control-label span1" for="password"  >{{ 'HOME_LOGIN_CONTENT_PASSWORD' | translate }} : </label>
            <input class="form-control span7"  ng-model="utilisateur.password" Name="password" placeholder="{{ 'HOME_LOGIN_CONTENT_PASSWORD' | translate }}" type="password" required />
        </div>

        <div class="row">
            <button type="submit" class="btn btn-primary">{{ 'HOME_LOGIN_CONTENT_VALIDATE' | translate }}</button>
        </div>

</form>

結果是：

我正在使用最新版本的Bootstrap和AngularJS在以下代碼中加載表單：

<!-- MAIN CONTENT AND INJECTED VIEWS -->
        <div id="main" class="mainContainer" >

            <div ng-view 
            style="height:100%"></div>
        </div>

我的CSS：

    .mainContainer {
     float: none;
     margin-left: auto;
     margin-right: auto;
    text-align: center;
    width:100%;
}

我的目標是使登錄表單水平居中，並按以下示例對齊標簽：

（圖像取自此線程： 引導程序表單輸入字段對齊 ）

Answer 1

您使用的是Bootstrap 2列類，例如span2 ，但是您使用的是Bootstrap3。Bootstrap3使用列類，例如col-md-2 。

有關使用Bootstrap 3創建水平表單的背景信息，請參見http://getbootstrap.com/css/#forms-horizo​​ntal 。

Answer 2

請看這個鏈接

http://getbootstrap.com/2.3.2/base-css.html#forms

水平形式