Html 如何使用bootstrap创建包含搜索按钮的搜索栏？

我想为我的项目创建一个搜索栏，里面应该有一个像这样的搜索按钮

我的HTML如下所示：

<section id="search-section">
      <div class="container-fluid">
          <h3 class="text-center pt-4">Search for Courses</h3>

          <div class="container-fluid text-center pt-3 outbox">
            <div class='row'>
                <div class='col'>
                    <form class='order-1'>
                        <input type="text" class='form-control d-inline'>
                        <button class='btn btn-md btn-primary d-inline'>Search</button>
                    </form>
                </div>
            </div>
        </div>

      </div>
  </section>

---

我的代码的问题是，它在大屏幕上工作正常，但在小屏幕设备上却无法工作。我希望这样，在小屏幕情况下，搜索栏应该堆叠在搜索按钮的顶部。

您可以最小化自定义CSS（避免设置静态宽度），然后使用来定位搜索输入和按钮

<section id="search-section">
    <div class="container-fluid">
        <h3 class="text-center pt-4">Search for Courses</h3>
        <div class="container-fluid text-center pt-3 outbox">
            <div class='row'>
                <div class='col-lg-8 col-md-10 col-sm-11 mx-auto'>
                    <form class='order-1 d-flex flex-sm-row flex-column align-items-center'>
                        <input type="text" class='border-0 form-control h-100 mt-2 mt-sm-0'>
                        <button class='btn btn-primary mr-sm-1 mt-4 mt-sm-0 flex-fill'>Search</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

#search-section form {
    border: 1px solid black;
    border-radius: 5px;
    background-color: white;
    height: 50px;
    box-shadow: 3px 4px 4px rgba(0, 0, 0, .13);
}

.outbox {
    height: 500px;
}

.form-control:active,
.form-control:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

搜索课程
搜寻
#搜寻组表格{
边框：1px纯黑；
边界半径：5px；
背景色：白色；
高度：50px；
盒影：3px4p4pRGBA（0,0,0,13）；
}
.发件箱{
高度：500px；
}
.窗体控件：活动，
.窗体控件：焦点{
边界：无；
大纲：无；
盒影：无；
}

---

您需要为不同的屏幕大小和断点定义媒体查询。我想这样做，但认为可能有一些引导类可以使它更容易“但认为可能有一些引导类可以使它更容易”与所有自定义CSS用于大小和位置搜索表单和输入它将更容易只使用媒体查询

<section id="search-section">
    <div class="container-fluid">
        <h3 class="text-center pt-4">Search for Courses</h3>
        <div class="container-fluid text-center pt-3 outbox">
            <div class='row'>
                <div class='col-lg-8 col-md-10 col-sm-11 mx-auto'>
                    <form class='order-1 d-flex flex-sm-row flex-column align-items-center'>
                        <input type="text" class='border-0 form-control h-100 mt-2 mt-sm-0'>
                        <button class='btn btn-primary mr-sm-1 mt-4 mt-sm-0 flex-fill'>Search</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

#search-section form {
    border: 1px solid black;
    border-radius: 5px;
    background-color: white;
    height: 50px;
    box-shadow: 3px 4px 4px rgba(0, 0, 0, .13);
}

.outbox {
    height: 500px;
}

.form-control:active,
.form-control:focus {
    border: none;
    outline: none;
    box-shadow: none;
}