如果用行将列 Package 起来，则可以在<div class="col-md-1"></div>中嵌套列
示例：

<div class="col-md-1">
   <div class="row">
      <div class="col-md-6">
          2.1 col
      </div>
   </div>
</div>

http://getbootstrap.com/css/#grid-nesting

我不确定那时候有没有可能，但现在有了。

<div class="content">
  <div class="row">
      <div class="col-auto p-1"><i class="fa fa-envelope" aria-hidden="true"></i></div>
      <div class="col-8 p-1">You sent a message to Shanice</div>
      <div class="col">
        <button type="button" class="btn btn-primary">Resend</button>
      </div>
  </div>
</div>

col-auto：让列尽可能地小--大小刚好能容纳其中的内容https://getbootstrap.com/docs/4.0/layout/grid/#variable-width-content
p-1：提供了几乎最小的填充。p-0对于我所需要的来说太小了。请参见https://getbootstrap.com/docs/4.0/utilities/spacing/#notation

我知道现在很晚了，但我一直在寻找处理这个问题的方法，遇到了这个问题，所以我想我应该分享我的解决方案。
据我所知，Bootstrap中没有处理这种情况的默认方法。我所做的是删除.col-x类，但保留row类。然后，我向节中添加了一个自定义类，并对我正在处理的行使用百分比宽度。我得到了以下结果：

<style>
    .section-1, .section-3 {
        width: 47%;
    }
    .section-2 {
        width: 6%;
    }
</style>

<div class="container">
    <div class="row">
        <div class="section-1">
            <!-- Content Here -->
        </div>
        <div class="section-2">
            <!-- Content Here -->
        </div>
        <div class="section-3">
            <!-- Content Here -->
        </div>
    </div>
</div>

请记住，默认情况下这是不响应的，但是在CSS中使用媒体查询调整宽度百分比是很容易的。

你好，我为你做了这个。把你的类放进你的div里，现在比以前短了两倍
示例：col-custom-1 < col-xx-1

.col-custom-1{
  flex: 0 0 4.16666%;
  max-width: 4.16666%;
}
.col-custom-2{
  flex: 0 0 8.3333%;
  max-width: 8.3333%;
}
.col-custom-3{
  flex: 0 0 12.5%;
  max-width: 12.5%;
}
.col-custom-4{
  flex: 0 0 16.6666%;
  max-width: 16.6666%;
}
.col-custom-5{
  flex: 0 0 20.83333%;
  max-width: 20.83333%;
}
.col-custom-6{
  flex: 0 0 25%;
  max-width: 25%;
}
.col-custom-7{
  flex: 0 0 29.1666666667%;
  max-width: 29.1666666667%;
}
.col-custom-8{
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}
.col-custom-9{
  flex: 0 0 37.5%;
  max-width: 37.5%;
}
.col-custom-10{
  flex: 0 0 41.6666%;
  max-width: 41.6666%;
}
.col-custom-11{
  flex: 0 0 45.83333%;
  max-width: 45.83333%;
}
.col-custom-12{
  flex: 0 0 50%;
  max-width: 50%;
}
.col-custom-13{
  flex: 0 0 54.16666%;
  max-width: 54.16666%;
}
.col-custom-14{
  flex: 0 0 58.33333%;
  max-width: 58.33333%;
}
.col-custom-15{
  flex: 0 0 62.50000%;
  max-width: 62.50000%;
}
.col-custom-16{
  flex: 0 0 66.6666%;
  max-width: 66.6666%;
}
.col-custom-17{
  flex: 0 0 70.83333%;
  max-width: 70.83333%;
}
.col-custom-18{
  flex: 0 0 75.0000%;
  max-width: 75.0000%;
}
.col-custom-19{
  flex: 0 0 79.16666%;
  max-width: 79.16666%;
}
.col-custom-20{
  flex: 0 0 83.3333%;
  max-width: 83.3333%;
}
.col-custom-21{
  flex: 0 0 87.50000%;
  max-width: 87.50000%;
}
.col-custom-22{
  flex: 0 0 91.6666%;
  max-width: 91.6666%;
}
.col-custom-23{
  flex: 0 0 95.83333%;
  max-width: 95.83333%;
}
.col-custom-24{
  flex: 0 0 100%;
  max-width: 100%;
}

我的情况也是如此，但在bootstrap 5.2中解决简单：
“冷自动”