Question

我有一个小的登录表单，我想要在同一行。首先，我尝试将它与标签一起使用，但它没有按照我的预期工作。所以我抛弃标签并使用占位符代替输入。但现在我得到了我想要的东西，但它没有以适当的形式出现。

它的外观如下：

这是我的代码：

<div class="modal-header">
    <h3 class="modal-title">Confirm ?</h3>
</div>
<div class="modal-body">
    Are you sure you want to continue ?
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-disabled="doAuthenticate" ng-click="yes()">Yes</button>
    <button class="btn btn-primary" ng-click="cancel()">Cancel</button>
    <div ng-show="doAuthenticate">
        <hr>
        <form name="authForm" ng-submit="authenticate(authForm.$valid)" novalidate>
            <div class="form-group">
                <input class="col-sm-2" type="text" ng-model="authUser" placeholder="Username" required autofocus>
                <input class="col-sm-2" type="password" ng-model="authPass" placeholder="Password" required>
                <button class="btn btn-primary" type="submit" ng-disabled="authForm.$invalid">Authenticate!</button>
            </div>
        </form>
    </div>
</div>

我实际上在代码中使用了Angular。我只是想知道如何让登录表单出现在一行中，整齐排列。我也希望它能够做出回应。就像我调整大小时一样，我希望输入与按钮一起显示在另一个之下。

编辑：这是修改后的目标：

Answer 1

这可能会有所帮助。您应该使用bootstrap类进行正确对齐。最好的方法是你的HTML应该是正确的，以便html应该显示你想要的。

试试你自己。这是建议

＆＃13;

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

    <div class="modal-header">
      <h3 class="modal-title">Confirm ?</h3>
    </div>
    <div class="modal-body row">
      <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="col-md-8 col-sm-8 col-xs-8">
          Are you sure you want to continue ?
         </div>
         <div class="col-md-4 col-sm-4 col-xs-4" alight="right">
              <button class="btn btn-primary" ng-disabled="doAuthenticate" ng-click="yes()">Yes</button>
              <button class="btn btn-primary" ng-click="cancel()">Cancel</button>
          </div>
        </div>
     </div>
     <div class="modal-footer">
          <div class="row">
            
          
          <div ng-show="doAuthenticate " class="col-md-12 col-sm-12 col-xs-12">
            <hr>
            <form name="authForm" ng-submit="authenticate(authForm.$valid)" novalidate>
              <div class="form-group">
               <table class="col-md-12 col-sm-12 col-xs-12">
                <tr>
<td>
<input class="form-control" type="text" ng-model="authUser" placeholder="Username"  required autofocus>
               
</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td>
 <input class="form-control"  type="password" ng-model="authPass" placeholder="Password" required>
</td>
<td><button class="btn btn-primary" type="submit" ng-disabled="authForm.$invalid">Authenticate!</button></td>
</tr>
              </table>
 
                
              </div>

            </form>
          </div>
        </div>
    </div>

＆＃13;

Answer 2

请找到说明您想要的行为的工作sample。

<强> HTML：

<div class="modal-header">
    <h3 class="modal-title">Confirm ?</h3>
</div>
<div class="modal-body">
    Are you sure you want to continue ?
</div>
<div class="modal-footer">
    <div ng-show="doAuthenticate">
        <form name="authForm" ng-submit="authenticate(authForm.$valid)" novalidate>
            <div class="form-group">
                <div class="row">
                    <div class="col-sm-4">
                        <input class="form-control" type="text" ng-model="authUser" placeholder="Username" required autofocus>
                    </div>
                    <div class="col-sm-4">
                        <input class="col-sm-3 form-control" type="password" ng-model="authPass" placeholder="Password" required>
                    </div>
                    <div class="col-sm-4">
                        <button class="btn btn-primary" type="submit" ng-disabled="authForm.$invalid">Authenticate!</button>
                    </div>
                </div>

            </div>
        </form>
    </div>
    <hr>
    <button class="btn btn-primary" ng-disabled="doAuthenticate" ng-click="yes()">Yes</button>
    <button class="btn btn-primary" ng-click="cancel()">Cancel</button>

在模态内的同一行中形成

2 个答案: