如何正确嵌套Bootstrap网格以避免列换行？

需求：构建左侧8列、右侧4列的网格布局，右侧4列内进一步拆分为4列（B）和8列（C），要求B和C在同一行不换行。

当前代码：

<div class="container">
  <div class="row">
    <div class="col-sm-8 col-md-8">
      A
    </div>
    
    <div class="col-sm-4 col-md-4">
      <div class="col-sm-4 col-md-4">
        B
      </div>
      
      <div class="col-sm-8 col-md-8">
        C
      </div>
    </div>
  </div>
</div>

问题：目前C显示在B的下方，无法实现同一行布局。

Bootstrap的网格系统中，嵌套的列必须包裹在新的.row容器内。因为.col-*类默认带有左右内边距（padding-left/padding-right），直接在列内放置子列会导致总宽度超出父列的可用空间，从而触发换行。

修正后的代码：

<div class="container">
  <div class="row">
    <div class="col-sm-8 col-md-8">
      A
    </div>
    
    <div class="col-sm-4 col-md-4">
      <!-- 新增嵌套的row容器，抵消子列的内边距影响 -->
      <div class="row">
        <div class="col-sm-4 col-md-4">
          B
        </div>
        
        <div class="col-sm-8 col-md-8">
          C
        </div>
      </div>
    </div>
  </div>
</div>

解释：

• 在右侧的.col-sm-4列内添加.row容器，该容器通过负左右外边距抵消子列的内边距，确保子列总宽度刚好填满父列可用空间。
• 子列的col-sm-4和col-sm-8是基于父列（4列宽度）的12等分比例计算，宽度占比为1:2，不会超出父列宽度导致换行。

内容的提问来源于stack exchange，提问作者spreaderman