为何col-md-6容器内form-row中的两个col-md-2列会出现换行问题？

• 列宽类断点不匹配：你使用的col-md-*类仅在屏幕宽度≥768px时生效，若测试环境屏幕宽度小于该阈值，列宽规则失效，元素默认占满100%父容器宽度，就会出现换行。你给出的父容器是col-md-6，仅在≥768px宽度下占半行，小屏幕下同样会占满整行，内部两个col-md-2也会各自占满整行，自然上下排列。
• 按钮组类名拼写错误：单选按钮容器的类名你写为btn_group，Bootstrap4 官方的按钮组类名为btn-group（中划线而非下划线），错误类名无法触发按钮组的flex同行布局规则，按钮默认按行内块排列，宽度不足就会换行。

1. 调整列宽类适配目标尺寸：如果需要所有屏幕尺寸下两个输入框都同行，将col-md-2替换为col-2；如果仅需要中等及以上屏幕同行，可以保留col-md-2，同时补充小屏幕的列宽规则，比如col-3 col-md-2。
2. 修正按钮组类名：将<div class="btn_group btn-group-sm">改为<div class="btn-group btn-group-sm">即可。

<!-- 修正后的日期输入行 -->
<div class="form-row">
    <div class="form-group col-2 col-md-2">
        <label for="fromDate">arrival</label>
        <input id="fromDate" class="form-control" type="text" name="fromDate">
    </div>
    <div class="form-group col-2 col-md-2">
        <label for="toDate">departure</label>
        <input id="toDate" class="form-control" type="text" name="toDate">
    </div>
</div>

<!-- 修正后的单选按钮组 -->
<div class="btn-group btn-group-sm" name="appartement" id="appartement" role="group" aria-label="Basic radio toggle button group">
      <input type="radio" class="btn-check form-control-sm" name="btnradio" id="btnradio1" autocomplete="off">
      <label class="btn btn-outline-primary " for="btnradio1">both</label>
    
      <input type="radio" class="btn-check form-control-sm" name="btnradio" id="btnradio2" autocomplete="off">
      <label class="btn btn-outline-primary" for="btnradio2">upper</label>
    
      <input type="radio" class="btn-check form-control-sm" name="btnradio" id="btnradio3" autocomplete="off">
      <label class="btn btn-outline-primary" for="btnradio3">lower</label>
</div>

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