bootstrap弹出窗页面不能居中

  最近好几天没有发博文了,来一波吧!

  刚刚搬运了个bootstrap的弹出窗,发现这个弹出窗中的列表字段过多了以后就不能居中显示了,然后一顿的操作,有时候像个坦克,有时候像个雪糕,额。。。你懂得,最后才发现 在这个<div class="modal-dialog">中加上一个居中的样式就行了,果然,

加上这个居中的代码之后就完美解决了,至于那些个页面的效果图,我就不贴图了。还望理解!

<div class="modal fade" id="myModal-addserviceRelation">
    <div class="modal-dialog" style="text-align: center;width: 700px;">
        <div class="modal-content" >
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                <h4 class="modal-title">新增服务</h4>
            </div>
            <input type ="hidden" id ="re_addserviceId">
            <div class="modal-body">
                <form class="form-horizontal mt12" role="Conditionform" method="post">
                    <div class="col-xs-12">
                        <table class="table table-bordered" id="jqGridRestRelation">
                        </table>
                        <div id="jqGridPagerRestRelation"></div>
                    </div>
                    <div class="clearfix"></div>
                </form>
            </div>
            <div class="modal-footer">
                <a class="btn btn-default" data-dismiss="modal">取消</a>
                <a class="btn btn-primary" href="javascript:void(0)" onclick="saven()">确定</a>
            </div>
        </div>
    </div>
</div>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap弹出层是一种常用的前端组件,用于在网页中显示弹出的模态框或提示框。通过Bootstrap弹出层组件,可以实现点击按钮或链接时弹出一个模态框来展示内容、表单或其他元素。 在我们之前的文章中,我们已经在基于SpringMVC的基础框架上应用了BootStrap的后台框架,这样我们就可以很方便地使用Bootstrap弹出层组件来创建各种弹出框。 Bootstrap弹出层的使用非常简单,只需要在需要触发弹出的元素上添加相应的属性或使用JavaScript代码即可。例如,通过添加"data-toggle"属性和"data-target"属性,可以实现点击按钮时弹出一个模态框。 此外,Bootstrap还提供了丰富的配置选项,可以通过这些选项来定制弹出层的样式、位置和行为。通过设置不同的参数,可以实现不同类型的弹出层,如模态框、提示框、下拉菜单等。 需要注意的是,Bootstrap弹出层组件需要引入Bootstrap的CSS和JavaScript文件,并按照它们的组件文档提供的方式进行配置和使用。 总之,Bootstrap弹出层是一个非常实用的前端组件,可以帮助我们快速创建漂亮和功能强大的弹出框。在基于SpringMVC的项目中,我们可以结合BootStrap的后台框架来应用和定制弹出层组件,以实现更好的用户体验和交互效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Bootstrap框架----弹出层录入](https://blog.csdn.net/q383965374/article/details/79731617)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [Java企业报表管理系统源码](https://download.csdn.net/download/m0_55416028/88269629)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值