Question

我有以下bootstrap html：

<div class="container-fluid">
    <form class="row loginContainer">
        <div class="col-sm-offset-3 col-sm-6 col-lg-offset-4 col-lg-4">
            <div class="hidden-xs well" style="background: #0a0a0a;">
                <img style="max-width: 300px" src="/Images/Logon-Logo.png" />
                <div class="form-inline col-sm-6">
                    <div class="form-group" style="padding-top: 20px;">
                        <input type="text" class="form-control" [(ngModel)]="model.userName" placeholder="User Name" required />
                    </div>

                    <div class="form-group" style="padding-bottom: 20px;">
                        <input type="password" class="form-control" [(ngModel)]="model.password" placeholder="Password" required />
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

这导致我的2个文本框显示在井下方。如果我删除了col-sm-6，它会正确显示。

造成这种情况的原因是什么以及如何修复它以便我可以输入col-sm-6？

Answer 1

这是你正在寻找的吗？将表单内联换行到新的行和列中。

<div class="container-fluid">
<form class="row loginContainer">
    <div class="col-sm-offset-3 col-sm-6 col-lg-offset-4 col-lg-4">
        <div class="hidden-xs well" style="background: #0a0a0a;">
            <img style="max-width: 300px" src="/Images/Logon-Logo.png" />
            <div class="row">
              <div class="col-md-6">
                <div class="form-inline">
                    <div class="form-group" style="padding-top: 20px;">
                        <input type="text" class="form-control" [(ngModel)]="model.userName" placeholder="User Name" required />
                    </div>

                    <div class="form-group" style="padding-bottom: 20px;">
                        <input type="password" class="form-control" [(ngModel)]="model.password" placeholder="Password" required />
                    </div>
               </div>
             </div>
          </div>
        </div>
    </div>
</form>
</div>

使用col-sm时，Bootstrap将我的表单控件放在下面

1 个答案: