Bootstrap 網格系統（Grid System）的工作原理
Bootstrap網格系統的工作原理主要基于CSS的盒模型（Box Model）和Flexbox布局。以下是其工作原理的詳細解釋：
容器（Container）和行（Row）：Bootstrap網格系統的最外層是一個容器（.container），它為內部的行（.row）提供了適當的對齊和內邊距。行是一個水平的布局容器，用于創建列的水平組。
列（Column）：列（.col-*）是行的直接子元素，內容應該放置在列內。Bootstrap網格系統允許你創建最多12列的布局，通過指定你想要橫跨的列數來實現。例如，.col-6表示該列將占據容器寬度的一半。
響應式布局：Bootstrap網格系統是一個響應式的網格系統，它根據設備的屏幕大小自動調整布局。通過使用不同的類名前綴（如.col-md-、.col-lg-等），你可以為不同大小的設備定義不同的列數。這使得你的網頁能夠在不同設備上呈現出最佳的布局效果。
Flexbox布局：Bootstrap 4及以上版本使用Flexbox布局來實現網格系統。Flexbox提供了一種更加靈活和強大的布局方式，可以輕松地對齊、排序和分布容器內的元素。通過使用Flexbox的屬性和Bootstrap提供的類名，你可以輕松地實現復雜的布局效果。
內邊距（Padding）和外邊距（Margin）：在Bootstrap網格系統中，列通過內邊距（padding）來創建列內容之間的間隙。同時，行通過外邊距（margin）來創建行與行之間的間隙。這種設計使得網格系統更加靈活，并且能夠輕松地實現各種布局效果。
Bootstrap網格系統的工作原理主要基于CSS的盒模型、Flexbox布局以及響應式設計理念。通過合理地使用容器、行和列，以及不同的類名和屬性，你可以輕松地創建出美觀、響應式且易于維護的網頁布局。
