如何实现div元素并排排列？现有下拉框与文本域如何调整为横向布局

解决方案 #

完全可以实现，你当前布局上下排布的核心原因是两个表单控件分别放在了两个独立的.row容器中，且每个容器内的列宽设置为col-sm-12（默认占满整行宽度），以下是两种常用的调整方案：

方案1：复用现有Bootstrap栅格系统（无需额外写CSS） #

你项目已经引入了Bootstrap框架，直接调整栅格结构即可，修改后代码如下：

<div style = "display: inline-block;" class="sev_border">
  <h4>Se</h4>
  <!-- 两个控件放在同一个.row容器下 -->
  <div class="row">
    <!-- 拆分列宽，这里设置为小屏幕以上各占6格（半行宽度），可按需调整比例 -->
    <div class="col-sm-6">
      <div class="form-group shiny-input-container" style="width:100%;">
        <label class="control-label" id="Is" for="Is">Is</label>
        <div>
          <select id="Is"><option value="" selected></option>
<option value="Not Applicable">Nble</option>
<option value="No Impact">Nct</option>
<option value="Low Impact">Loct</option>
<option value="Medium Impact">Medact</option>
<option value="High Impact">Higct</option></select>
          <script type="application/json" data-for="Is">{"plugins":["selectize-plugin-a11y"]}</script>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="form-group shiny-input-container" style="width: 100%;">
        <label class="control-label" id="SEVE-label" for="SEV 3">SEVER</label>
        <!-- 修正原代码里错误的行内样式：width:width:100%;; -->
        <textarea id="SEVE3" class="form-control" style="width: 100%;height:200px;"></textarea>
      </div>
    </div>
  </div>
</div>

• 调整说明：把原来两个独立的.row合并为一个，两个控件分别放在col-sm-6容器中，小屏幕及以上尺寸会自动平分宽度并排显示，更小的屏幕会自动降级为上下排布，适配移动端。

方案2：使用Flex布局自定义 #

如果需要更灵活的对齐、间距控制，可以给外层容器加Flex布局：
先添加如下CSS样式：

.form-wrapper {
  display: flex;
  gap: 20px; /* 控制两个控件之间的间距 */
  align-items: flex-start; /* 顶部对齐，避免下拉框被拉伸高度 */
  flex-wrap: wrap; /* 宽度不足时自动换行，适配小屏幕 */
}
.form-wrapper .form-group {
  flex: 1; /* 两个控件平分剩余宽度 */
  min-width: 300px; /* 最小宽度，避免太窄时样式错乱 */
}

再调整HTML结构，把两个表单组件放在同一个带form-wrapper类的容器内即可。

注意事项 #

• 原代码中textarea的行内样式存在语法错误width:width: 100%;;，务必修正为width:100%;，否则会导致宽度样式失效
• 可根据你的实际页面宽度需求调整列宽比例、Flex布局的参数，适配你的业务场景

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