Bootstrap md屏幕网格布局下缩略图过窄问题咨询

我在中等（md）屏幕尺寸下使用Bootstrap网格系统，粘贴自定义内容缩略图的代码后，出现了缩略图过窄的问题——默认文本"Thumbnail label"在"Thumb-"处就超出了缩略图右边界。我希望缩略图能在网格系统内占满可用空间，当前的代码如下：

<div class="row"> 
  <div class="col-md-4"> 
    <div class="row"> 
      <div class="col-sm-6 col-md-4"> 
        <div class="thumbnail"> 
          <img src="..." alt="...">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>...</p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

咱们先揪出问题根源：你嵌套了两层row和col，外层col-md-4里面又套了一个row和col-sm-6 col-md-4，这就相当于给缩略图的父容器额外加了宽度限制，自然窄得放不下文本。要让缩略图占满网格内的可用空间，你可以试试这两个方案：

• 方案一：移除多余的嵌套层级
  直接删掉内层的row和col-sm-6 col-md-4，让thumbnail直接放在外层的col-md-4里，这样缩略图会自动占满这个列的宽度：

<div class="row"> 
  <div class="col-md-4"> 
    <div class="thumbnail"> 
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

• 方案二：如果需要保留嵌套结构（比如要在col-md-4里放多个小元素）
  把内层的col-md-4改成col-md-12，让内层列占满外层col-md-4的全部宽度，缩略图就能跟着撑满空间了：

<div class="row"> 
  <div class="col-md-4"> 
    <div class="row"> 
      <div class="col-sm-6 col-md-12"> 
        <div class="thumbnail"> 
          <img src="..." alt="...">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>...</p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

要是用的是Bootstrap 4及以上版本，还可以给thumbnail加个w-100类强制它占满父容器宽度，但调整网格层级才是最根本的解决办法哦。

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