Question

我找到了一个由大约20.000页组成的网页的管理员。所有页面都使用引导程序组件的一部分。

我正在制作和设计一些新页面。因此，我想确定的是，我不会用CSS全局更改任何内容。一个例子可以是该行，我必须在该行上进行填充。

我在主页上发布了一些CSS的示例。在这段代码中，这两个类将在整体上改变事物：

.row [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
  }

.row {
    margin-left: -5px;
    margin-right: -5px;
  }

那么在我所有的课上都可以加上某种前缀吗？交换一个名为.mk {}的父类，然后我所有的类都将进入该类。

我希望这个问题能引起人们的注意-否则请告诉我不清楚我要去哪里。

#front .row {
    padding-bottom: 0px!important;
  }
  body {
    background-color: #f5f5f5;
  }

  /* Set width between grid elements */
  
  .small-padding.top {
    padding-top: 10px;
  }
  
  .small-padding.bottom {
    padding-bottom: 10px;
  }
  
  .small-padding.left {
    padding-left: 5px;
  }
  
  .small-padding.right {
    padding-right: 5px;
  }
  
  .margin_bottom {
    margin-bottom: 10px;
  }
  
  .row [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
  }
  
  .row {
    margin-left: -5px;
    margin-right: -5px;
  }
  
  .img-responsive {
    height: 100%;
  }
  
  /* Position of buttons/text in a single grid element */
  
  .inner-wrapper {
    background: none;
  }
  
  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
  }
  
  .bottom-left {
    position: absolute;
    bottom: 2%;
    left: 6%;
  }
/* Position text on full width banner */
  .header-container {
    color: white;
    margin: 0 5%;
  }
  .banner-text {
    position: absolute;
    bottom: 16%;
    left: 6%;
  }
  
  /* Color on text */
  
  .dark-font {
    color: #333;
  }
  
  .light-font {
    color: #fff;
    text-transform: uppercase;
  }
  .blue-font {
    color: #00a9ff;
  }
   
  /* Set full width on columns */
  
  @media (max-width: 768px) {
    .img-responsive {
      width: 100%;
      height: auto;
    }
    /* Maybe delete btn-success: */
    .btn-success {
      width: fit-content;
    }
  }
  
  @media (max-width: 991px) {
    h3 {
      font-size: 1.2em;
    }
  }
  .image-overlay {
    position:relative;
  }
  .overlay {
    position:absolute;
    transition:all .3s ease;
    opacity:0;
    transition:1.9s;
    background: #00b1bab8;
  }
  .image-overlay:hover .overlay {
    opacity:1;
  }
  .overlayFade {
    background: rgba(27, 27, 27, 0.5);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 15px;
    padding-left: 35px;
    padding-right: 35px;
  }

Answer 1

那么在我所有的课上都可以加上某种前缀吗？

为什么不呢？

只需在页面中添加一些基类，然后创建属于该基类的样式表即可。

<style>
.mk .row [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

.mk .row {
    margin-left: -5px;
    margin-right: -5px;
}
</style>

然后将您的课程添加到body标记附近，或者您所做的更改与网站模板不同的地方。

<body class="mk">
    <!-- Your code here -->
</body>

这样做将允许您导入所有样式表，以便您可以在它们之上进行构建并使用自己的样式进行覆盖。

Answer 2

是的，您可以添加前缀，但是我想与其嵌套覆盖自己的类名来覆盖引导类，也不是一个好主意。即

.custom-class .row {
   // Changing margins and padding here
}

相反，您可以创建自己的helper类以用于间距和定位，或者如果您已经在使用 Bootstrap v4 ，则在实用程序部分中，它们提供了大量的间距和定位类.px-* .p-* .mx-* .p-*等，您可以看看它们here。

或者只是根据您的需要为不同的值制作自己的classes。但是我仍然建议不要覆盖它们。

确保CSS不会影响具有父类的所有页面

2 个答案: