Question

我为某人接管了一个项目。这位前开发人员开始使用Bootstrap创建一个新菜单。问题是引导程序和项目中至少有一个其他CSS文件具有相同名称的类。因此，bootstrap导致现有布局无法正常显示。有什么方法可以解决这种情况？ Bootstrap真的只需要与网页标题一起使用，而不是其他任何东西。 CSS不是我强大的技能之一。

Answer 1

The problem is that bootstrap and at least one other CSS file in the project have classes with the same name.//

这是找到这些冲突类并为外部css文件提供自定义名称的最佳时机。我们始终建议不要通过修改bootstrap css 来改变引导类，或者让我们的类与引导程序分配相同的名称。不这样做可能会使您的项目扩展时的生活更加艰难。所以比抱歉更安全。

Answer 2

您可以尝试更改CSS文件以获得更具体的规则，例如;

<div class="header">
    <div class="items">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</div>

将CSS规则设置为

.header .items .block{

}

而不仅仅是

.block{

}

Answer 3

你说这是依赖Bootstrap的标题，没有别的，如果是这样，你的Bootstrap版本是3.0及以上，你可以从GetBootstrap.com定制器中获得导航栏和相关的css

enter image description here

在您切换所需内容后，向下滚动并删除其他添加内容（只需取消选中或将其全部关闭）然后向下并仅下载其他开发人员使用的菜单所需的CSS。如果它是.container类的冲突，您可以在刚下载的已编译CSS中重命名它，然后在您的html中使用该重命名的类。

你没有提到什么是冲突的，通常它是.container类，但是元素可能会被全局box-sizing：Bootstrap使用的边框框搞乱。要解决这个问题，请不要删除它，最好使用它，只需将元素重新设置为正确的宽度，不要担心填充或边框。在此处阅读：http://www.paulirish.com/2012/box-sizing-border-box-ftw/

处理具有相同名称的CSS类

3 个答案: