Bootstrap 4-使居中的搜索表单仅在小屏幕上全宽显示

Bootstrap是一个流行的前端开发框架，它提供了丰富的CSS和JavaScript组件，可以帮助开发人员快速构建响应式网页和Web应用程序。

在Bootstrap 4中，要使居中的搜索表单仅在小屏幕上全宽显示，可以使用以下步骤：

1. 创建一个包含搜索表单的HTML结构，可以使用Bootstrap提供的表单组件，例如<form>、<input>和<button>等。
2. 使用Bootstrap的栅格系统来设置表单的布局。栅格系统将页面水平划分为12个列，可以根据需要在不同屏幕大小下调整列的宽度。在这种情况下，我们希望搜索表单在小屏幕上全宽显示，可以将表单的列宽设置为12，即占据整个屏幕的宽度。
3. 使用Bootstrap的CSS类来实现居中对齐。可以将表单的父元素设置为d-flex justify-content-center，这将使表单在水平方向上居中对齐。

下面是一个示例代码：

<div class="container">
  <div class="row">
    <div class="col-12 d-flex justify-content-center">
      <form>
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search">
          <div class="input-group-append">
            <button class="btn btn-primary" type="button">Go</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

在这个示例中，使用了Bootstrap的容器（container）、行（row）和列（col-12）来创建一个基本的网格布局。搜索表单被包裹在一个列中，并使用d-flex justify-content-center类使其居中对齐。搜索表单使用了Bootstrap的输入组（input-group）和按钮（btn）组件。

推荐的腾讯云相关产品和产品介绍链接地址：

• 腾讯云主页：https://cloud.tencent.com/
• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
• 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
• 云存储（COS）：https://cloud.tencent.com/product/cos
• 人工智能（AI）：https://cloud.tencent.com/product/ai
• 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
• 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mpns
• 区块链（BCS）：https://cloud.tencent.com/product/bcs
• 元宇宙（Tencent XR）：https://cloud.tencent.com/product/xr