Bootstrap 4 是一个流行的前端框架，它提供了丰富的工具和组件，帮助开发者快速构建响应式和美观的网页。布局调整是Bootstrap 4中非常重要的一部分，它可以帮助你根据需求定制网页的结构和样式。以下是一些关于Bootstrap 4布局调整的详细指导。
1. 基础布局结构
Bootstrap 4的基础布局结构主要依赖于栅格系统（Grid System）。栅格系统将页面分为12列的容器，你可以通过类名来控制这些列的宽度、对齐方式和排列顺序。
1.1 栅格类
Bootstrap 4提供了以下栅格类：
.col-
：在手机端上应用的栅格类。
.col-sm-
：在平板端上应用的栅格类。
.col-md-
：在桌面中等尺寸上应用的栅格类。
.col-lg-
：在桌面大尺寸上应用的栅格类。
例如，如果你想要一个在手机端占满整个屏幕的列，在平板端占6个栅格宽度，在桌面中等尺寸上占4个栅格宽度，可以这样写：

1.2 响应式布局
Bootstrap 4的栅格系统是响应式的，这意味着你可以通过调整栅格类来适应不同屏幕尺寸的设备。
2. 布局容器
Bootstrap 4提供了两个布局容器类：
.container
和
.container-fluid
。
.container
：固定宽度，通常用于中等尺寸的屏幕。
.container-fluid
：全宽度，适用于全屏布局。
例如，如果你想要一个固定宽度的容器，可以这样写：

3. 布局列偏移
你可以使用偏移类来控制列的位置。例如，如果你想要一个列向右偏移4个栅格宽度，可以这样写：

4. 布局列堆叠
Bootstrap 4允许你在小屏幕上将列堆叠起来。例如，在手机端上，你可以使用
.col-12
来使列占满整个屏幕。

5. 布局列嵌套
你可以嵌套列来创建复杂的布局。例如，在一个列中嵌套另一个列：

6. 布局辅助类
Bootstrap 4还提供了一些辅助类来帮助你调整布局，例如：
.d-none
：在所有屏幕尺寸上都不显示。
.d-md-block
：在桌面中等尺寸及以上屏幕上显示。
.text-center
：文本居中对齐。
7. 实例
以下是一个使用Bootstrap 4栅格系统创建的简单布局实例：

通过以上步骤，你可以掌握Bootstrap 4的布局调整技巧，让你的网页焕然一新。