Bootstrap窗口resize时Div内元素及标签重叠问题求助

嘿，我看到你在用Bootstrap时遇到了两个响应式布局的重叠问题——窗口缩放时Div内元素重叠，还有行内标签和下拉框的重叠。结合你给出的代码片段，我整理了几个实用的修复方案：

先修复最基础的语法问题 #

首先，你的代码里card-block标签没闭合（<div class='card-block' 少了闭合的>），这个小错误会直接导致布局结构错乱，先把它补上：

<div class='card-block'> <!-- 补上这个闭合符号 -->

问题1：窗口Resize时Div内元素重叠 #

你给标签和下拉框的外层加了text-nowrap类，这个类会强制内容不换行，当窗口缩小到没有足够空间时，元素就会挤在一起重叠。

• 如果不是必须让内容在所有屏幕下都不换行，直接移除text-nowrap就行，Bootstrap会自动让小屏元素换行；
• 如果需要在大屏（比如lg及以上）保持不换行，小屏自动换行，可以用响应式的flex类替代：d-lg-nowrap d-wrap（适用于Bootstrap 4及以上版本），这样大屏保持一行，小屏自动换行。

问题2：行内标签与下拉框重叠 #

看你的列配置：大屏下标签是col-lg-6，下拉框是col-lg-5，总和是11，虽然留了1列，但元素本身的默认内边距/外边距可能会让实际宽度超出父容器，导致重叠。另外小屏下标签是col-xs-12（占满一行），下拉框是col-xs-11，如果下拉框内容过长或者标签文本换行，也可能出现重叠。

具体修复方法： #

1. 调整列分配，给元素留够空间
   把大屏的列改成总和为12的配置，比如标签col-lg-5 + 下拉框col-lg-7，或者两者都设为col-lg-6，确保父容器的空间被合理分配：

   <label class="control-label col-xs-12 col-md-12 col-lg-5" for="FinalMonthEnd">Final Month End:</label>
   <kendo-dropdownlist class="col-xs-12 col-md-12 col-lg-7" id="FinalMonthEnd">...</kendo-dropdownlist>
   

   小屏直接让两者都占满一行（col-xs-12），避免空间不足。

2. 添加间距，避免元素紧贴
   给标签和下拉框加一些margin类，比如mb-2（底部间距）、mr-2（右侧间距），拉开元素之间的距离：

   <label class="control-label col-xs-12 col-md-12 col-lg-5 mb-2 mr-2" for="FinalMonthEnd">Final Month End:</label>
   

3. 用Flex布局替代固定列，更灵活
   如果你用的是Bootstrap 4+，推荐用flex布局来替代固定列，它会自动根据屏幕大小调整元素排列，避免重叠：

   <div class="d-flex flex-wrap align-items-center">
     <label class="control-label mr-2 mb-2" for="FinalMonthEnd">Final Month End:</label>
     <kendo-dropdownlist class="flex-grow-1" id="FinalMonthEnd">...</kendo-dropdownlist>
   </div>
   

   这里flex-wrap让空间不足时自动换行，align-items-center保证元素垂直居中，flex-grow-1让下拉框占满剩余空间，适配各种屏幕。

完整修复后的示例代码 #

<div class="col-xs-12 col-md-12 col-lg-12">
  <div class="row">
    <div class="col-xs-12 col-md-12 col-lg-2">
      <div class='card'>
        <div class='card-block'>
          <div class="d-flex flex-wrap align-items-center">
            <label class="control-label mr-2 mb-2" for="FinalMonthEnd">Final Month End:</label>
            <kendo-dropdownlist class="flex-grow-1" id="FinalMonthEnd">...</kendo-dropdownlist>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

你可以根据实际需求调整间距和布局，核心就是让元素在不同屏幕下都有足够的展示空间，避免强制不换行，同时保证HTML结构的正确性。

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