Bootstrap布局疑问：如何增大col-sm列宽且保持三列同行不换行？

我当前正在使用Div col-sm/md/lg进行布局，设置了三张图片分别位于各自的col-sm容器中。我希望图片能更大一些，但将col-sm-4调整为col-sm-5后，第三张图片会换行到下方，而我需要三列始终保持在同一行。我了解到当列数总和超过12时会自动换行，但我的三列左右两侧有大量空白区域，请问能否利用这些空白来增大列宽且避免换行？以下是其中一列的代码：

<div class="col-xs-12 col-sm-4 eq-items"> 
  <div class="row">
    <img src="/content/pexels-anna-shvets-4226122.jpg" alt="" title="" style="max-width: 100%; max-height: 300px;" data-d2l-editor-default-img-style="true" /><br /> 
    <div class="col-sm-12"> 
      <h3>MyFIRE Instructor Training</h3> 
      <p style="text-align: left;"><span style="font-family: verdana, sans-serif; font-size: 11pt;">The MyFIRE instructor training courses are provided to help introduce the MyFIRE learning platform. These courses expand upon various training materials that will assist in the addition of content, resources, media, and tools to enhance the student learning experience. We invite you to explore and learn about the many capabilities of SEU's learning platform. Please note: Permissions vary based on instructor role so some editing options may not be available.</span></p> 
      <p style="text-decoration: underline;"><span style="font-family: verdana, sans-serif; font-size: 11pt;"><a href="/d2l/lor/viewer/viewFile.d2lfile/30233/4225,-1/" target="_blank" rel="noopener">MyFIRE Training Courses for Instructors</a></span></p> 
      <h1 dir="ltr" style="text-align: center;"><span style="font-family: verdana, sans-serif; font-size: 11pt;"><strong>Contact:&nbsp;</strong></span></h1> 
      <p dir="ltr" style="text-align: center;"><span style="font-family: verdana, sans-serif; font-size: 11pt;">idttraining@seu.edu</span></p> 
    </div> 
  </div> 
</div>

没问题，你的核心需求是在不换行的前提下利用左右空白放大三列，这里给你几个实用的方案：

1. 自定义列宽（摆脱Bootstrap 12格限制） #

Bootstrap默认的12格系统确实会限制列总和，但你可以绕开预设的col-sm-x类，自己定义列的宽度：

• 给每一列加个自定义类，比如custom-three-col，然后写对应的媒体查询CSS：

/* 对应sm断点（屏幕≥576px时生效） */
@media (min-width: 576px) {
  .custom-three-col {
    flex: 0 0 auto;
    width: 32%; /* 可根据实际视觉调整，比如33%、31% */
    margin: 0 0.67%; /* 用margin控制列间距，替代Bootstrap默认gutter */
  }
}

• 把原来的col-sm-4替换成这个自定义类，保留col-xs-12保证移动端正常堆叠：

<div class="col-xs-12 custom-three-col eq-items">
  <!-- 内部内容保持不变 -->
</div>

这样三列总宽度+间距总和控制在100%以内，既能利用左右空白放大列宽，又不会触发换行。

2. 调整容器和 gutter 释放空间 #

如果想继续用Bootstrap的列系统，可以从容器和间距入手：

• 把外层的.container换成.container-fluid，让容器占满整个视口宽度，直接利用原本的左右空白；
• 自定义CSS减少列的内边距（gutter），给图片腾出更多空间：

@media (min-width: 576px) {
  .col-sm-wide {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }
}

• 给列加上这个类：col-xs-12 col-sm-4 col-sm-wide，这样列的实际可用宽度会更大，图片自然就能放大。

3. 直接调整图片尺寸（快速见效） #

如果不想改动布局结构，直接调整图片的样式就能快速实现：

• 把图片的max-width从100%改成更大的值，比如115%，同时给父容器加overflow: hidden避免溢出；
• 再加个transform: translateX(-2.5%)让图片居中，防止单侧溢出被截断：

<div class="col-xs-12 col-sm-4 eq-items" style="overflow: hidden;">
  <div class="row">
    <img src="/content/pexels-anna-shvets-4226122.jpg" alt="" title="" style="max-width: 115%; max-height: 300px; transform: translateX(-2.5%);" data-d2l-editor-default-img-style="true" />
    <!-- 其他内容不变 -->
  </div>
</div>

这个方法最省事，适合快速调整，但要注意不要把max-width设得太大，避免影响相邻列的布局。

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