如何解决Bootstrap中分页不能居中的问题

尝试过1.text-align:center居中;2.margin:0 auto; 3.display: flex;justify-content: center;都不行

解决: 在外层多加一个nav标签包着,然后text-align:center;就会生效了,成功实现了分页居中

<nav style="text-align: center;">
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
</nav>

原文地址:https://www.cnblogs.com/zhf123/p/11581671.html

时间: 2024-10-06 06:41:35

如何解决Bootstrap中分页不能居中的问题的相关文章

解决IE中div不居中的问题(尤其IE5)

最近布局时遇到了一个问题,就是如何设置div居中?通过查找资料终于找到了解决方案,只需要把要居中的div外嵌套一个div,设置其“text-align:center;”,然后设置要居中的div为“margin-left:auto;margin-right:auto;”提示:若设置后IE5中仍不居中,只需将外层div设置为“width:100%;”,即可解决问题.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

解决bootstrap中modal Esc键不生效问题

bootstrap为我们提供了很多方便的页面控件,modal就是其中之一.很多人在使用modal时遇到了esc键按下无法关闭的问题,即使显式传入keyboard选项也不生效. $('#editFormItemModal').modal({show:true, keyboard:true}); 此问题在2.1以后版本出现,要解决这个问题也很简单,modal所在div添加一个tabindex属性即可: <div class="fade modal" tabindex="-1

解决bootstrap中显示不了本地字体图标

正在用bootstrap写一个登录界面时,准备用一个图标 但实际效果是: 可以看到图标并没有显示出来,百度一下,发现有可能是路径问题. 自己的目录关系和引用方式如下分别为: Ctrl+左键进入glyphicon发现引用都为: 原来当bootstrap.min.css文件到fonts的方式写为../fonts,这样其实只是返回到的css目录下 所以复制粘贴fonts到css目录下 之后成功显示: 原文地址:https://www.cnblogs.com/miaobo/p/10197803.html

(转)Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound

http://blog.xmaoseo.com/glyphicons-halflings-regular-woff-font-404-notfound/ 今天查看网站的源代码,发现有个glyphicons-halflings-regular.woff文件没有找到,因为我的网站使用了bootstrap的Glyphicons 字体图标,因此需要加载Glyphicons Halflings的相关文件,但是我的文件中明明有这个文件那怎么会报404错误呢? 那么具体是什么原因,我想到绝对路径中有,相同文件

Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound

今天查看网站的源代码,发现有个glyphicons-halflings-regular.woff文件没有找到,因为我的网站使用了bootstrap的Glyphicons 字体图标,因此需要加载Glyphicons Halflings的相关文件,但是我的文件中明明有这个文件那怎么会报404错误呢? 那么具体是什么原因,我想到绝对路径中有,相同文件夹下的其他文件都可以找到为什么这个找不到呢?我发现这个文件的后缀是.woff,难道是因为我的服务器不支持这种文件,果然查资料知道我的空间使用的是Windo

Bootstrap Paginator 分页插件参数介绍及使用

Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作.目前经过测试的浏览器包括: Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+. GitHub 官网地址:https://github.com/lyonlai/bootstrap-paginator 参数

Bootstrap中的less基础

在线编译 因为 less 的语法毕竟相对简单,所以一些在线工具可以很轻松的做到.比如 http://less.cnodejs.net http://www.ostools.net/less  一般都有两个框,左侧输入less,右侧呈现编译的 css,方便在线学习和测试. 修改 bootstrap 中的 less 如下图,入口文件是 bootstrap.less 和 responsive.less 文件—— 这个入口文件 bootstrap.less 是这样引用其他 less 文件的: 了解这份

在bootstrap中让竖向排列的输入框水平排列

在bootstrap中可以使用自带的样式标记来控制样式,但是同时可以利用最原始的css样式来解决达到需求 如下所示可以看出来两个inline-block就可以使得两个水平排列 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 大体来说

angularjs中分页的应用

应angular的spa项目需要,现后台管理系统中需要用到分页,于是就找到了这个基于bootstrap的分页,封装性很好,用起来也非常方便,这里是模拟的数据库数据,实际中只需要将模拟数据换成接口调用返回的数据即可,并且可以实现按页.按数量的按需加载,也可以全部加载,记得引入ui.bootstrap就可以了 效果如图: 下面是完整可直接运行的代码: <!DOCTYPE html> <html lang="en" ng-app="myApp">