Bootstrap布局问题：两个输入块无法水平排列，显示为垂直布局

你代码里的form-row和col-md-5是Bootstrap的栅格布局类，必须引入Bootstrap的CSS文件才能生效。没引入的话，浏览器会把这些div当作默认块级元素，自然垂直堆叠。

方法1：使用Bootstrap（推荐，如果你本来就想用它） #

在HTML的<head>里加上Bootstrap的CSS引用：

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

之后你的原有代码就能正常让输入框水平排列，屏幕宽度小于md（768px）时会自动换行适配。

方法2：原生CSS实现（不依赖框架） #

如果不想用Bootstrap，直接用flex布局写样式：

<style>
  .form-row {
    display: flex;
    gap: 1rem; /* 两个输入块之间的间距 */
    flex-wrap: wrap; /* 小屏幕自动换行 */
  }
  .form-group {
    flex: 1 1 45%; /* 每个块占约45%宽度，可根据需求调整 */
    min-width: 200px; /* 最小宽度，避免太窄 */
  }
  .form-control {
    width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
</style>

<div class="form-row">
  <div class="form-group">
    <label for="fname">First name:</label>
    <input type="text" class="form-control" id="fname" placeholder="First name">
  </div>
  <div class="form-group">
    <label for="lname">Last name</label>
    <input type="text" class="form-control" id="lname" placeholder="lastname">
  </div>
</div>

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