使用内容主体居中导航和标题

Question

我正在使用凝灰岩时间将我的网站导航与内容正文联系起来。我希望导航以中心而不是浏览器为中心，因为它看起来像是内容体的一点点并且看起来不太正确。

这可能吗？ http://www.bryananthonylewis.com/只是一个关于Twitter Bootstrap的简单博客。

Answer 1

标题没有问题。实际上，下面的内容没有居中，这是因为在div.container下面有一个“span8 offset2 middle”类的不需要的div。通过完全删除该div并通过

覆盖css文件中的.container来解决此问题

.container {
  width:777px;
}

chrome检查器中的相同编辑示例

Answer 2

我认为你在这里走错了路。

使用chromeinspect进行快速扫描显示我使用span8 offset 2作为主要内容（容器元素中#moal-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>

这里缺少woops代码标签

我觉得这应该做同样的事情。 我也相信标题需要相同的修复。但我不是百分百肯定，所以请尝试并评论是否有效。此更新基于官方文档

bootstrap documentation

如果事情不起作用，请忘记我的建议并坚持行动

Answer 3

如果您参考以下屏幕截图：

你会看到所有东西都排成一行，除了图标没有在中心计算的宽度。你显然希望图标有宽度。

那我们怎么做呢？

也许像i标签那样添加一些东西：

i {

  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  vertical-align: text-top; 

}

更新：

上面的屏幕截图指出了问题。媒体查询后，该网站进入平板电脑模式，导航关闭。现在，回去工作！