Bootstrap的float-right属性作用于需右对齐的翻页按钮div不生效怎么办

问题原因 #

你使用的Bootstrap 4及以上版本中，.row默认采用Flex布局，Flex容器的直接子元素的float属性会被浏览器强制忽略，这是float-right不生效的核心原因。
另外你给两个按钮外层加了col-6类，就算float生效，单独显示下一章按钮时，它也只会在容器右半侧区域排列，无法贴到容器最右侧。

解决方案（推荐Flex原生方案，无需自定义CSS） #

直接用Bootstrap自带的Flex对齐类实现两端对齐，完美适配你仅显示单个按钮的场景：

<div class="row justify-content-between" id="tab-change">
  <!-- 上一章按钮 -->
  <div class="d-none" id="prevBtn">
    <div class="bg-dark p-10 text-white text-center" style="min-width: 200px; padding: 10px;">
      <h5 class="m-b-0 m-t-5"><i class="fas fa-arrow-left"></i> 上一章</h5>
      <small class="font-light" id="prev-chapter">Total Users</small>
    </div>           
  </div>
  <!-- 下一章按钮 -->
  <div class="d-none" id="nextBtn">
    <div class="bg-dark p-10 text-white text-center" style="min-width: 200px; padding: 10px;">
      <h5 class="m-b-0 m-t-5">下一章 <i class="fas fa-arrow-right"></i></h5>
      <small class="font-light" id="next-chapter"></small>
    </div>           
  </div>
</div>

justify-content-between属性会自动将子元素向容器两端对齐：

• 两个按钮都显示时，上一章贴左、下一章贴右
• 仅显示上一章时，按钮自动靠左
• 仅显示下一章时，按钮自动靠右

备用方案（坚持使用float的情况） #

给.row加d-block类关闭默认Flex布局，同时移除两个按钮外层的col-6类即可：

<div class="row d-block" id="tab-change">
  <div class="float-left d-none" id="prevBtn">
    <!-- 按钮内部内容保持不变 -->
  </div>
  <div class="float-right d-none" id="nextBtn">
    <!-- 按钮内部内容保持不变 -->
  </div>
  <div class="clearfix"></div>
</div>

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