美文网首页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 居中显示

    要达成这种显示效果:

  • bootstrap学习1

    下载及引用 在bootstrap官网下载,解压在自己新建的站点里,比如myweb文件下。 布局容器div 居中显示...

  • div垂直居中显示

    有的朋友可能发现我昨天没更,毕竟昨天总决赛,就允许我稍微偷个懒吧。IG牛逼! 今天,我想回忆并且总结下关于div垂...

  • div垂直居中显示

    今天,我想回忆并且总结下关于div垂直居中的内容。 这个内容在CSS这一块可以说是非常重要的一块了,首先在我们平时...

  • Bootstrap 图片水平居中显示

    使用 Bootstrap 将一个图片水平居中显示怎么写呢?

  • 垂直居中显示(文字&块级元素)

    文字在div中垂直居中显示 -方法1:将div改为table格式css如下: html如下: -方法2:将div改...

  • HTML5学习小记四

    1.图片在div中居中显示 CSS样式如下: div{width:300px; height:150px; bac...

  • h5小问题总结

    在div无宽高的基础上,实现div居中显示方法: 1、若div宽不变,可以使用padding或margin来实现 ...

  • 关于div的居中显示

    温故而知新!自己准备做点小东西的时候用了图片居中,突然想起老师说的另一种解决方法!但是我的脑容量有限,依稀只记得有...

  • CSS使用汇总

    CSS样式技巧 div居中显示:text-align与margin配合 {text-align: center; ...

网友评论

    本文标题:bootstrap div 居中显示

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