css - 以内容正文为中心的导航和标题

标签 css twitter-bootstrap centering

我正忙于将我的网站导航与内容主体放在一起。我希望导航以它而不是浏览器为中心,因为它看起来有点像内容主体的左侧并且看起来不太正确。

这可能吗? http://www.bryananthonylewis.com/只是一个带有 Twitter Bootstrap 的简单博客。

最佳答案

我觉得你走错路了..

使用 chromeinspect 的快速扫描显示您使用 span8 offset 2 作为您的主要内容(您的容器元素中的第一个元素就在#modal-contact 下方),我认为您的主要内容有点偏右并且不是左边的标题。

我的快速修复:

去除偏移量, 并通过以下方式获取该内容的 css 样式:

float: none;
margin: 0 auto; /*replace 0 for top margin*/

按照 Pankaj 的建议为容器设置宽度也可能有效,尽管您可能会以这种方式丢失 Bootstrap 提供的动态宽度变化......没有检查所以我在那部分可能是错误的

更新

另一个澄清的更新

删除以前的修复。 在#modal-contact 正下方的容器元素中添加一个包装 div, 不像我想的那样在你的页面顶部......

<div class="container">
    <div class='row'>
        <div class="span8 offset2">
             blogcontent here
        </div>
    </div>
<div>

这里缺少代码标签

我觉得这应该做同样的事情。 而且我也相信 header 需要相同的修复。但我不是 100% 确定,所以请尝试评论它是否有效。本次更新基于官方文档

bootstrap documentation

如果不行,忘记我的建议,坚持行之有效

关于css - 以内容正文为中心的导航和标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14819085/

相关文章:

css - 将点 Bootstrap 符用于带有 Bootstrap 网格的食物菜单

css - -moz-box-align : center 的问题

html - 如何在 CSS 中设置按比例缩放的标题图片的样式?

javascript - 多次点击弹出

当我悬停另一个 anchor 时,Jquery 从一个 anchor 移除悬停

css - 如何设置 Bootstrap 响应表中列的大小

twitter-bootstrap - Twitter Bootstrap 更大的字形图标。

css - 在变换中使用 calc() :rotate()

html - 如何将未知/动态高度的图像置于未知/动态高度的 float div 中?

html - IE 不会居中 <main> 和它的内容