HTML代码运行后提交按钮未与文本输入框并排显示问题求助

• 缺少Bootstrap样式依赖：代码中仅引入了Poppins字体资源，未引入Bootstrap CSS文件，代码里写的row、col-xs-8、col-md-10这类栅格类没有对应样式支撑，所有div默认是块级元素，会独占一行触发换行。
• 栅格结构不符合规则：Bootstrap栅格要求col-*类元素必须是row类元素的直接子节点，当前结构是row → form → col-*，层级不匹配，栅格宽度计算逻辑无法生效。
• 表单元素未适配父容器宽度：就算栅格生效，输入框和按钮默认宽度不会自动撑满父级容器，也可能出现排版错位。

可选择以下任意一种方案修复：

方案1：按Bootstrap规范调整（适配原有代码的栅格写法） #

1. 在head标签中引入Bootstrap CSS资源
2. 给form标签添加row类，让它成为栅格的直接父级
3. 给输入框添加form-control类、按钮添加btn类，让元素自适应父容器宽度
   修复后的完整代码如下：

<!DOCTYPE html>
<head>
  <link href="https://fonts.google.com/specimen/Poppins?preview.size=20" rel="stylesheet">
  <!-- 新增引入Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
</head>
<body>
  <header class="header">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-md-12">
          <h1>Kalyan The Coder</h1>
        </div>
      </div>
    </div>
  </header>
  <div class="main">
    <div class="container">
      <div class="row">
        <!-- form添加row类 -->
        <form class="form row">
          <div class="col-xs-8 col-md-10">
            <!-- 输入框加form-control类 -->
            <input type="text" id="TextBox1" class="form-control" placeholder="Enter your query">
          </div>
          <div class="col-xs-4 col-md-2">
            <!-- 按钮加btn类适配样式 -->
            <button type="submit" class="button btn btn-default btn-block">post</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>
</html>

方案2：自定义CSS实现（无需引入Bootstrap） #

直接给form添加弹性布局样式即可，不需要依赖第三方框架，在head中添加如下样式：

<style>
.form {
  display: flex;
  gap: 10px;
}
#TextBox1 {
  flex: 1;
  padding: 6px 12px;
}
.button {
  padding: 6px 20px;
}
</style>

添加后可直接删掉原有代码里没用的col-*、row相关类，代码更精简。

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