通过参考类为目标类col-sm-5 col-md-5应用自定义CSS

没问题，我来给你几种简单直接的方案，帮你给这个特定的列应用自定义CSS：

1. 快速测试：内联样式 #

如果你只是想快速验证效果，可以直接在目标div上添加style属性，这种方式适合临时调试：

<div class="container extra-info"> 
  <div class="row"> 
    <div class="col-sm-5 col-md-5" style="background-color: #f0f0f0; padding: 1rem;">
      <!-- 你的内容 -->
    </div> 
  </div> 
</div>

2. 单页面自定义：内部样式表 #

如果这个样式只在当前页面生效，推荐在HTML的<head>标签里添加内部样式表。为了避免影响页面中其他col-sm-5 col-md-5元素，我们可以用精准的嵌套选择器来定位目标元素：

<head>
  <!-- 先引入Bootstrap的CSS文件 -->
  <link rel="stylesheet" href="bootstrap.css">
  
  <!-- 自定义样式放在Bootstrap之后，确保优先级 -->
  <style>
    /* 精准定位到extra-info容器下的目标列 */
    .container.extra-info .row .col-sm-5.col-md-5 {
      background-color: #f0f0f0;
      padding: 1.5rem;
      border-radius: 8px;
      /* 这里可以添加任何你需要的CSS属性 */
    }
  </style>
</head>

<body>
  <div class="container extra-info"> 
    <div class="row"> 
      <div class="col-sm-5 col-md-5">
        <!-- 你的内容 -->
      </div> 
    </div> 
  </div>
</body>

3. 项目级规范：外部样式表 #

如果是多页面项目，最好把自定义CSS写在单独的外部样式文件里（比如custom.css），然后在HTML中引入：

custom.css文件内容：

/* 同样用精准选择器定位目标列 */
.container.extra-info .row .col-sm-5.col-md-5 {
  background-color: #f0f0f0;
  padding: 1.5rem;
  border-radius: 8px;
}

HTML中引入（放在Bootstrap之后）：

<head>
  <link rel="stylesheet" href="bootstrap.css">
  <link rel="stylesheet" href="custom.css">
</head>

小提示：样式优先级 #

如果发现你的自定义样式被Bootstrap的默认样式覆盖了，可以两种方式解决：

• 给选择器增加更多的父级元素，提高优先级（比如上面的嵌套选择器就比单独的.col-sm-5优先级高）
• 紧急情况下可以在属性值后加!important（不推荐过度使用，会增加样式维护难度），比如：

.container.extra-info .row .col-sm-5.col-md-5 {
  background-color: #f0f0f0 !important;
}

内容的提问来源于stack exchange，提问作者presita parmar