如何根据屏幕尺寸为HTML元素设置不同的Bootstrap类？

Bootstrap的响应式断点系统和工具类就是专门解决这类跨屏幕适配问题的，完全不用写两套DOM结构或者手动切换代码——只需要在现有元素上添加响应式前缀的类就能完美适配需求。

具体修改方案 #

你可以直接把代码改成下面这样，利用Bootstrap的移动优先断点（xs、md）来控制不同屏幕下的样式：

<div class="tabs tabs-vertical tabs-left">
  <ul class="nav nav-tabs flex-column flex-xs-row nav-justified nav-justified-md-start">
    <!-- 你的标签项示例 -->
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#tab1">标签1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#tab2">标签2</a>
    </li>
  </ul>
  <div class="tab-content">
    <!-- 对应标签内容示例 -->
    <div class="tab-pane active" id="tab1">内容1</div>
    <div class="tab-pane" id="tab2">内容2</div>
  </div>
</div>

类名作用说明 #

这里的核心是通过响应式类实现屏幕适配：

• flex-column flex-xs-row：在xs小屏下让标签切换为水平排列（避免垂直布局拥挤），md及以上大屏下恢复你原来的垂直左侧布局
• nav-justified nav-justified-md-start：在xs小屏下让标签项平分宽度，充分利用屏幕空间；大屏下恢复左对齐的默认样式
• 自定义类适配：如果你的tabs-vertical tabs-left是自定义的垂直布局类，给它加个媒体查询，确保仅在大屏生效：

@media (min-width: 768px) {
  .tabs-vertical.tabs-left {
    /* 保留你原来的垂直左侧布局样式，比如固定宽度、浮动等 */
  }
}

直接把这段代码放到Django模板里就行，不需要额外的JavaScript——Bootstrap的CSS会自动根据屏幕尺寸切换样式，完美解决小屏显示差的问题。

内容的提问来源于stack exchange，提问作者J. Santiago