如何使用Twitter Bootstrap获得中心内容?
本文翻译自:How do you get centered content using Twitter Bootstrap?
I'm trying to follow a very basic example. 我试图遵循一个非常基本的例子。 Using the starter page and the grid system , I was hoping the following: 使用入门页面和网格系统 ,我希望以下内容:
<div class="row"> <div class="span12"> <h1>Bootstrap starter template</h1> <p>Example text.</p> </div> </div>
...would produce centered text. ......会产生中心文本。
However, it still appears on the far left. 但是,它仍然出现在最左边。 What am I doing wrong? 我究竟做错了什么?
#1楼
参考:https://stackoom.com/question/cXDJ/如何使用Twitter-Bootstrap获得中心内容
#2楼
The best way to do this is define a css style: 最好的方法是定义一个css样式:
.centered-text {text-align:center
}
Then where ever you need centered text you add it like so: 然后你需要居中的文本,你可以像这样添加它:
<div class="row"><div class="span12 centered-text"><h1>Bootstrap starter template</h1><p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p></div>
</div>
or if you just want the p tag centered: 或者如果你只想让p标签居中:
<div class="row"><div class="span12 centered-text"><h1>Bootstrap starter template</h1><p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p></div>
</div>
The less inline css you use the better. 你使用的内联css越少越好。
#3楼
If you are using Bootstrap 2.0+ 如果您使用的是Bootstrap 2.0+
This can make the div centered to the page. 这可以使div以页面为中心。
<div class="row"><div class="span4 offset4">//your content here gets centered of the page</div>
</div>
#4楼
Any text-align utility class would do the trick. 任何文本对齐实用程序类都可以解决问题。 Bootstrap has been using .text-center
class for centering text for a long time now. Bootstrap已经使用.text-center
类来长时间居中文本了。
.text-center { text-align: center !important; }
Or you can create your own utilities. 或者您可以创建自己的实用程序。 Some variations I've seen over the years: 我多年来看到的一些变化:
.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }
#5楼
NOTE: this was removed in Bootstrap 3 . 注意:这在Bootstrap 3中被删除 。
Pre-Bootstrap 3, you could use the CSS class pagination-centered
like this: Pre-Bootstrap 3,你可以使用CSS类pagination-centered
如下所示:
<div class="span12 pagination-centered">Centered content.
</div>
Class pagination-centered
is already in bootstrap.css (or bootstrap.min.css) and has the only one rule: pagination-centered
类已经在bootstrap.css(或bootstrap.min.css)中并且只有一个规则:
.pagination-centered{text-align:center;}
With Bootstrap 2.3.0. 使用Bootstrap 2.3.0。 just use class text-center
只需使用类text-center
#6楼
On my side I define new CSS
styles ready to use and easy to remember: 在我这边,我定义了可以使用且易于记忆的新CSS
样式:
.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/
.fright { float: right;} /*-> similar to .pull-right already existing in bootstrap*/
.vab { vertical-align: bottom;}
.bold { font-weight: bold;}
.italic { font-style: italic;}
Is it a good idea? 这是个好主意吗? Is there any good practice for this? 这有什么好的做法吗?
如何使用Twitter Bootstrap获得中心内容?相关推荐
- 如何更改Twitter Bootstrap模式框的默认宽度?
本文翻译自:How can I change the default width of a Twitter Bootstrap modal box? I tried the following: 我尝 ...
- 带有Spring,Hibernate,Akka,Twitter Bootstrap,Apache Tiles和jQuery的Maven Web项目Kickstarter代码库...
我很高兴将第二个项目上传到GitHub,以帮助人们尽快开始Java Web App开发. 我正在与Apache License 2.0共享此代码. 这是相同的网址: https://github.co ...
- 城市简码_如何使用简码在WordPress中添加Twitter Bootstrap CSS
城市简码 Adding CSS elements like tooltips, colorful buttons, and roll-over effects can help your conten ...
- 将功能绑定到Twitter Bootstrap Modal关闭
我在一个新项目上使用Twitter Bootstrap lib,我希望页面的一部分刷新并检索模式关闭时的最新json数据. 我看不到文档中的任何地方,有人可以向我指出或提出解决方案. 使用记录方法的两 ...
- SpringCloud配置中心内容加密
转载自 SpringCloud配置中心内容加密 从配置获取的配置默认是明文的,有些像数据源这样的配置需要加密的话,需要对配置中心进行加密处理. 下面使用对称性加密来加密配置,需要配置一个密钥,当然也可 ...
- 使用Twitter Bootstrap,WebSocket,Akka和OpenLayers玩(2.0)
原始帖子可以在ekito网站上找到. 对于我们的一位客户,我们需要显示一张具有实时更新的车辆位置的地图. 因此,我开始使用Play制作原型! 框架及其最新发布的版本2.0,使用Java API. 我从 ...
- 如何在悬停而不是单击时使Twitter Bootstrap菜单下拉列表
我想让我的Bootstrap菜单在悬停时自动下拉,而不必单击菜单标题. 我还想丢失菜单标题旁边的小箭头. #1楼 这将隐藏上升的 .navbar .dropdown-menu:before {disp ...
- 12个免费的 Twitter Bootstrap 后台模板
12个免费的 Twitter Bootstrap 后台模板 在互联网上提供很多免费的 Bootstrap 管理后台主题.所有你需要做的就是将它们下载并安装它们,这真的不是什么难事.问题是如何寻找 ...
- 推荐13款优秀的Twitter Bootstrap JavaScript插件
Bootstrap是基于HTML,CSS和JavaScript的简洁灵活的流行前端框架及交互组件集,由微博先驱Twitter在2011年8月开源的整套前端解决解决方案,拥有非常完备和详尽的开发文档,有 ...
最新文章
- python写游戏脚本-使用Python写一个小游戏
- python字符串input输入_5.print()函数、转义字符、python注释、常量、字符串、格式化输出、input()输入...
- 文件夹配置文件服务器,服务器文件夹配置文件
- android sqlite更改数据,更新现有的sqlite数据库中的列,但没有任何更改android
- Python 第三方模块之 selenium - 模拟操作 Chrome 浏览器
- iOS - - JSON 和 XML解析
- jquery 高亮插件 highlight
- Linux——VIM学习选取多行(转)
- 使用JWT保护你的Spring Boot应用 - Spring Security实战
- MYSQL—— 基础入门,select 查询涉及到的关键字组合详解(进阶篇)
- 300本计算机编程的经典书籍下载
- 【博弈 —— NIM模型】
- 后台UI框架bootstrap、JQuery——Hplus-v.4.1.0
- 博思特POSITAL编码器OCD58-CA1212-B15V-H3P
- 最近看到需要去学习的点(持续记录)
- openedge-function模块浅析——百度BIE边缘侧openedge项目源码阅读(3)
- K-Means(K均值聚类)原理及代码实现
- 计算机信息化教学培训心得体会,信息化教学培训心得体会_信息化教育学习收获范文...
- Spring +mybatisplus+shiro权限管理集成整合
- 如何评估社交网络中信息内容的价值呢?
热门文章
- undefined reference to `__gxx_personality_v0' collect2: ld returned 1 exit status
- 第十六周程序阅读(7)
- Android相机预览方向
- (0057)iOS开发之Xcode9进行iOS设备无线调试
- ftp 信息服务器日常维护,Web Ftp Mail服务器的日常管理与维护
- 编码区和非编码区的关系
- 批量启动关闭MS SQL 2005服务BAT
- Codeforces614D Skills
- springboot 利用configureMessageConverters add FastJsonHttpMessageConverter 实现返回JSON值 null to ...
- linux 安装 apache+mysql+php