美文网首页Python学习
bootstrap div 居中显示

bootstrap div 居中显示

作者: Kewings | 来源:发表于2021-03-27 13:22 被阅读0次
    image.png

    要达成这种显示效果:

    <div class="container-fluid h-100 min-vh-100">
        <div class="d-flex justify-content-center align-items-center text-center min-vh-100 w-100">
        <form action="/" method="post" class="form-group w-100">
            {% csrf_token %}
            <div class="form-group row">
                <div class="col">
                <h3><span>SysTest Team Database</span></h3>
                </div>
            </div>
            <div class="form-group row w-100">
                <div class="col-3"></div>
                <div class="col">
                    <input type="text" class="form-control text-center" name="db_search" id="db_search" placeholder="Use space to split multi keywords">
                </div>
                <div class="col-3"></div>
            </div>       
            <div class="form-group row">
                <div class="col">
                    <button type="submit" class="btn btn-outline-secondary">Search</button>
                </div>
            </div>
        </form>
        </div>
    </div>
    

    相关文章

      网友评论

        本文标题:bootstrap div 居中显示

        本文链接:https://www.haomeiwen.com/subject/qmxyhltx.html