面试题：CSS框架之Bootstrap的栅格系统应用

Question

在Bootstrap框架中，简述如何使用栅格系统实现一个两列布局，左侧列占3/4宽度，右侧列占1/4宽度，并且在不同屏幕尺寸下如何适配调整布局？

Answer 1

1. HTML 结构：
   • 在 Bootstrap 中，使用.container或.container - fluid作为容器，内部使用.row类来创建行，行内使用列类来定义列。
   • 对于两列布局，左侧列占3/4宽度，右侧列占1/4宽度，可以这样写：

   <div class="container">
       <div class="row">
           <div class="col - md - 9">
               <!-- 左侧列内容 -->
           </div>
           <div class="col - md - 3">
               <!-- 右侧列内容 -->
           </div>
       </div>
   </div>
   

   • 这里.col - md - 9表示在中等及以上屏幕尺寸（md：≥768px）时，该列占9份宽度，.col - md - 3表示在中等及以上屏幕尺寸时，该列占3份宽度。由于 Bootstrap 的栅格系统是12列布局，9 + 3 = 12，刚好填满一行。
2. 不同屏幕尺寸下的适配调整布局：
   • 超小屏幕（手机，<576px）：
     • 默认为堆叠布局，即列会自动垂直排列。如果想要自定义布局，可以使用.col - xs - *类（xs在 Bootstrap 4 中可以省略不写）。例如：

     <div class="container">
         <div class="row">
             <div class="col - 12">
                 <!-- 超小屏幕下左侧列内容 -->
             </div>
             <div class="col - 12">
                 <!-- 超小屏幕下右侧列内容 -->
             </div>
         </div>
     </div>
     

     • 这里.col - 12表示在超小屏幕下，每个列都占满12份宽度，也就是一整行，实现堆叠效果。
   • 小屏幕（平板，≥576px）：
     • 使用.col - sm - *类。假设希望在小屏幕及以上保持两列布局，但比例可以调整，比如左侧列占8份，右侧列占4份，可以这样写：

     <div class="container">
         <div class="row">
             <div class="col - sm - 8">
                 <!-- 小屏幕下左侧列内容 -->
             </div>
             <div class="col - sm - 4">
                 <!-- 小屏幕下右侧列内容 -->
             </div>
         </div>
     </div>
     

   • 中等屏幕（桌面，≥768px）：前面已经提到使用.col - md - *类来实现特定比例的两列布局。
   • 大屏幕（大桌面，≥992px）：
     • 使用.col - lg - *类。例如希望在大屏幕下左侧列占10份，右侧列占2份：

     <div class="container">
         <div class="row">
             <div class="col - lg - 10">
                 <!-- 大屏幕下左侧列内容 -->
             </div>
             <div class="col - lg - 2">
                 <!-- 大屏幕下右侧列内容 -->
             </div>
         </div>
     </div>
     

   • 超大屏幕（超大桌面，≥1200px）：
     • 使用.col - xl - *类。例如在超大屏幕下左侧列占11份，右侧列占1份：

     <div class="container">
         <div class="row">
             <div class="col - xl - 11">
                 <!-- 超大屏幕下左侧列内容 -->
             </div>
             <div class="col - xl - 1">
                 <!-- 超大屏幕下右侧列内容 -->
             </div>
         </div>
     </div>
     

可以通过组合不同屏幕尺寸的列类，在不同屏幕尺寸下灵活调整布局。