基于mdbootstrap 4的响应布局

Question

我正在使用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>

我一直在摆弄着想要找到一个优雅的解决方案。谁能给我指明正确的方向？

Answer 1

试试这个

​

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<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-center">
                                <div class="col-12 col-sm-12 col-md-8 order-last order-sm-last text-right"> <a href=".">Ik ben mijn paswoord vergeten</a> </div>
                                <div class="col-12 col-sm-12 col-md-4 order-md-last">
                                    <button class="btn btn-primary btn-block order-last order-sm-firstt" target=".">Inloggen</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

​