使用 mdbootstrap 4 进行响应式布局

Question

我正在使用 mdbootstrap4 为 Web 应用程序创建原型 UI。

我一直在努力实现以下目标：

Design

本质上，登录容器会随着屏幕宽度的增加而扩大。随着可用屏幕宽度的减小（在移动设备上），link 和按钮应符合移动设备 UI 模式：登录按钮在前，其容器的全宽。我一直在努力让它工作，但是 link 文本溢出（多行）或者按钮的尺寸变得奇怪并且溢出文本。

此外，我似乎无法修复响应式排序和对齐方式。

我的代码：

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

使用 mdbootstrap 4 进行响应式布局

Responsive layouting with mdbootstrap 4

html

css

bootstrap-4

mdbootstrap