我正在使用 mdbootstrap4 为 Web 应用程序创建原型 UI。
我一直在努力实现以下目标:
本质上,登录容器会随着屏幕宽度的增加而扩大。随着可用屏幕宽度的减小(在移动设备上),链接和按钮应符合移动 UI 模式:首先是登录按钮,然后是其容器的全宽。我一直试图让它工作,但是链接文本溢出(多行)或按钮的尺寸变得奇怪并且也溢出了文本。
此外,我似乎无法修复响应式排序和对齐。
我的代码:
<div class="container">
<div class="row">
<div class="col text-center text-white">
<!-- Headers -->
</div>
</div>
<div id="login-form" class="row justify-content-center mt-5">
<div class="col-lg-6 col-md-8 col-10">
<div class="card">
<div class="card-body">
<form name="">
<div class="md-form">
<i class="fa fa-user prefix grey-text"></i>
<input type="text" id="form1" class="form-control">
<label for="form1">E-mailadres</label>
</div>
<div class="md-form">
<i class="fa fa-lock prefix grey-text"></i>
<input type="password" id="form2" class="form-control">
<label for="form2">Password</label>
</div>
<div class="container mt-5">
<div class="row align-items-center text-right">
<div class="col-12 col-sm-12 col-md-8 order-first order-sm-last text-right">
<a href=".">Ik ben mijn paswoord vergeten</a>
</div>
<div class="col-12 col-sm-12 col-md-4">
<button class="btn btn-primary btn-block order-last order-sm-first" target=".">Inloggen</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
我一直在努力寻找一个优雅的解决方案。谁能指出我正确的方向?