html - 使用 Twitter 引导响应 css 时的边框对齐问题

Question

我在Bootstrap Tutorial for Blog Design上找到了这篇文章。我计划将它用于我的一个项目，以提供它提供的响应式布局。我在为demo托管的页面中发现了一个问题。已附上截图 “Facebook Timeline Design using JQuery and CSS”页面中的第一个帖子落在了背景边框之外[已标记为蓝色]。[不是预期的结果]页面中的其余帖子落在了在边界内，这是预期的行为[已将其标记为绿色]。有什么办法可以解决第一个帖子落在背景边框之外的问题。我已经在 IE、firefox 和 chrome 中对此进行了测试，结果相同。在这里创建了一个jsbin页面

Answer 1

在 css 文件中，它声明第一个跨度元素在左侧没有边距。

第 232 行的 bootstrap-responsive.css：

.row-fluid [class*="span"]:first-child { 
    margin-left: 0px;
}

第 419 行的 bootstrap.css：

.row-fluid [class*="span"]:first-child { 
    margin-left: 0px;
}

删除或注释掉这些。

Answer 2

您可以使用 jquery 选择器解决它

$('.row > [class*="span"]:first-child').css({"padding-left":"20px"});

Answer 3

添加此样式表（首选在底部）

.row > [class*="span"]:first-child {
    padding-left: 20px;
}  

如果你愿意，你可以添加这个 jQuery

$('.row > [class*="span"]:first-child').css('padding-left','20px');