Bootstrap响应式类失效求助：已正确引入框架但类不生效

嘿，看起来你在这里踩了个Bootstrap布局的小坑——问题出在你给列加的float-md-right和float-md-left上！

为什么浮动不生效？ #

从Bootstrap 4开始，.row采用了Flexbox布局，里面的.col-*元素都是flex子元素。而float属性在flex子元素中会被浏览器忽略，所以你加的浮动类根本起不到作用，反而可能干扰网格系统的正常布局。

正确的写法 #

根据你的需求，分两种情况处理：

1. 仅需中等屏幕及以上两列并排

如果你只是想让小屏幕下两列堆叠，中等及以上屏幕各占一半并排，完全不需要浮动，Bootstrap的网格类本身就可以实现：

<div class="row">
  <div id="work1_1_over" class="col-sm-12 col-md-6"></div>
  <div id="work1_2_over" class="col-sm-12 col-md-6"></div>
</div>

.col-sm-12会让屏幕≥576px（Bootstrap 4的sm断点）时占满整行，.col-md-6则让屏幕≥768px（md断点）时各占50%宽度，自动并排。

2. 需要调整中等屏幕及以上的列顺序

如果你的需求是在中等及以上屏幕让第一个列靠右、第二个列靠左（也就是调换两列的显示顺序），应该用Bootstrap的order排序类，而不是浮动：

<div class="row">
  <div id="work1_1_over" class="col-sm-12 col-md-6 order-md-2"></div>
  <div id="work1_2_over" class="col-sm-12 col-md-6 order-md-1"></div>
</div>

order-md-2会让这个列在md及以上屏幕排在第2位，order-md-1排在第1位，小屏幕下还是保持原顺序堆叠。

额外检查点 #

• 确认你使用的是Bootstrap 4或5版本（如果是Bootstrap 3，布局逻辑是浮动式的，那你的写法可能有断点匹配问题，但现在主流都是4+了）。
• 确保.col-*元素直接作为.row的子元素，不要在中间嵌套其他非Bootstrap容器，否则会破坏网格的内边距和布局逻辑。
• 检查是否有自定义CSS覆盖了Bootstrap的样式，比如给列加了position: absolute、float或者修改了flex属性，这些都可能导致响应式失效。

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