应用边距属性的正确方法(特别是在Bootstrap中)

时间:2016-07-08 15:20:20

标签: html css twitter-bootstrap css3

我有限的CSS知识现在开始赶上我,我不知道如何处理这种特殊情况,尽管已经以各种形式捣乱了几个月。

所以我用我的纯色Bootstrap导航栏回到了这个问题,它没有完全延伸到浏览器的右侧几个像素。我永远无法弄清楚为什么,但我确实找到了一段时间,重写.row,右边的属性为0,解决了这个问题。快进几周,我只是注意到我的灰色内容框现在偏离中心,因为左侧和内容之间以及右侧和内容之间的边距不一样,显然是因为我以前的这种变化制作。

现在我可以通过覆盖.row并使用margin-left属性为0来解决这个问题(然后将这些值与填充相比较以获得所需的效果)但是我真的不确定这是不是很糟糕练习与否?因为.row是Bootstrap中最常用的类之一,当我必须有一个优雅的解决方案时,我觉得我正在被攻击(我无法弄清楚的一个问题是如何应用边距权限样式来某些外行而不是某些行 - 这将是一个噩梦,试图找出我项目的这个阶段的位置)。我尝试了一段时间来应用这个margin-right:0属性只是我认为是导航栏问题的罪魁祸首的特定行,但最后,我无法弄明白。

感谢任何帮助,谢谢!

2 个答案:

答案 0 :(得分:0)

你不应该改变Bootstrap类的css属性,原因有很多:首先是

  1. 您可以在您网站的其他位置创建回归(已经发生在您身上)
  2. 如果您将bootstrap css升级到新版本,则无法确定您的网站会发生什么?
  3. 你应该

    1. 将特定ID或特定自定义类添加到具有该问题的原始导航栏
    2. 然后创建一个自定义css文件(导入所有引导程序css文件后将在网页中导入)
    3. 将此新的自定义css文件中的规则添加到修复原始问题的导航栏的上一个新ID /类

答案 1 :(得分:0)

听起来您可能正在容器中嵌套容器或类似的嵌套问题。没有代码示例,我无法分辨。

您不需要在导航栏上使用行,bootstrap有自己的导航栏类。

有关如何执行此操作的摘要,请参阅http://www.w3schools.com/bootstrap/bootstrap_navbar.asp

此外,您永远不应编辑引导文件,创建覆盖文件并将所做的任何更改放入其中。确保在引导文件之后链接到覆盖文件,以使其正确级联。像这样:

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-override.css">