在模态框内的同一行中形成

Posted 2023-03-05

【中文标题】在模态框内的同一行中形成

【英文标题】：Form in same line inside a modal

【发布时间】：2016-05-19 00:45:39

【问题描述】：

我有一个小的登录表单，我想要在同一行中。 首先，我尝试将它与标签一起使用，但它没有按我预期的那样工作。所以我放弃了标签并使用占位符代替输入。但现在我得到了我想要的，但它的形式不正确。

这是它的外观：

这是我的代码：

<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。我只想知道如何让登录表单整齐地排列在一行中。我也希望它能够响应。就像我调整大小时一样，我希望输入与按钮一起出现在另一个下方。

编辑：这是修改后的样子：

【参考方案1】：

这可能会有所帮助。 您应该必须使用引导类进行正确对齐。 最好的方法是您的 html 应该是正确的，以便 html 应该按照您的意愿显示。

试试你自己。这是建议

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

【讨论】：

我只需要更改表格。模态的其余部分都很好。这就是我想要的。我只希望“模态页脚”采用正确的形式。您的解决方案看起来不错，但输入框没有圆边。

现在通过添加表单控制类来查看代码以输入带有圆边的框

这行得通。但它没有响应。我附上了它的外观截图。

@ViChU *** 社区不提供问题修复服务，这里的成员只是为您提供一点帮助以帮助您入门，这并不意味着他们会完全解决您的问题，谢谢

同意你@SagarGuhe

【参考方案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>