Question

我正在工作的项目有一个css文件，其中在所有Vue项目中导入的文件中都覆盖了.container-fluid。

我正在为这些页面添加7页。覆盖的行为对于旧的20页很有用。

但是我需要在其他页面中使用.container-fluid，如果使用它，它将无法按我的意愿工作。

如何解决此问题？我可以编写CSS类来做同样的事情吗？

Answer 1

绝对。请记住，Bootstrap仅仅是您在其之上构建的框架，实际上只是创建了一个“基本” CSS规则列表供您覆盖或使用。如果您希望Bootstrap的container-fluid应用于某些页面而不是其他页面，只需创建一个自定义CSS类，然后在其他页面上使用它即可：

.container-custom {
  width: 50%;
}

<div class="container-custom">

对于要使用Bootstrap容器的页面：

<div class="container-fluid">

请注意，.container-custom规则不适用于class="container-fluid"元素，因此它们仍然具有Bootstrap样式。

此外，别忘了Bootstrap中还有标准的 .container ，您会发现它很有用。