如何在bootstrap中div的中间水平对齐表单

 领悟人生的悲欢喜乐_829 发布于 2023-02-06 20:59

演示http://bootply.com/103569

可以使用像这样的偏移:

Example block-level help text here.

要么

Example block-level help text here.

http://getbootstrap.com/css/#grid-offsetting

1 个回答
  • 演示http://bootply.com/103569

    可以使用像这样的偏移:

    <div class="container">
    <div class="row clearfix">
        <div class="col-md-6 col-md-offset-3 column">
            <form role="form">
                <div class="form-group">
                     <label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
                </div>
                <div class="form-group">
                     <label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
                </div>
                <div class="form-group">
                     <label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile" />
                    <p class="help-block">
                        Example block-level help text here.
                    </p>
                </div>
                <div class="checkbox">
                     <label><input type="checkbox" /> Check me out</label>
                </div> <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-12 column">
        </div>
    </div>
    </div>
    

    要么

    <div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
        <div class="col-md-6 col-md-offset-3 column">
            <form role="form">
                <div class="form-group">
                     <label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
                </div>
                <div class="form-group">
                     <label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
                </div>
                <div class="form-group">
                     <label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile" />
                    <p class="help-block">
                        Example block-level help text here.
                    </p>
                </div>
                <div class="checkbox">
                     <label><input type="checkbox" /> Check me out</label>
                </div> <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
        </div>
    </div>
    </div>
    

    http://getbootstrap.com/css/#grid-offsetting

    2023-02-06 21:04 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有