Bootstrap列网格边距问题：page.aspx四列布局空白消除方法咨询

咱们来拆解下你遇到的问题：Bootstrap的container、row和col组件有默认的内边距/外边距规则，这才导致你的四列左右出现空白，中间列宽度被压缩。下面给你两种针对性的解决办法，按需选就行：

方法一：让四列完全撑满页面宽度（消除左右空白） #

如果你希望四列贴合页面左右边缘，没有任何空白，只需要把外层的container换成container-fluid就行。container-fluid是100%宽度的容器，配合row的负外边距，能抵消容器的内边距，让列的边缘直接对齐页面边缘：

<link rel=stylesheet href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div>
  <nav class="navbar">
    <div class="img">
      <img src="...">
    </div>
    <div class="img">
      <img src="...">
    </div>
  </nav>
</div>
<div class="container-fluid"> <!-- 替换container为container-fluid -->
  <div class="row">
    <div class="col-md-3" style="font-size:16px">
    </div>
    <div class="col-md-3 border-left">
    </div>
    <div class="col-md-3 border-left">
    </div>
    <div class="col-md-3 border-left">
    </div>
  </div>
</div>

方法二：保留列间距但消除首尾空白，让四列宽度完全均等 #

如果想保留列之间的间距，但去掉首尾列的左右空白，给row添加no-gutters类就可以。这个类会移除row的负外边距，同时去掉所有col的左右内边距，这样首尾列不会有额外空白，四列的宽度也能完全一致：

<link rel=stylesheet href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div>
  <nav class="navbar">
    <div class="img">
      <img src="...">
    </div>
    <div class="img">
      <img src="...">
    </div>
  </nav>
</div>
<div class="container">
  <div class="row no-gutters"> <!-- 添加no-gutters类 -->
    <div class="col-md-3" style="font-size:16px">
    </div>
    <div class="col-md-3 border-left">
    </div>
    <div class="col-md-3 border-left">
    </div>
    <div class="col-md-3 border-left">
    </div>
  </div>
</div>

补充：自定义列间距的方案 #

如果你想保留列之间的间距，但又不想首尾有空白，可以手动调整样式：
比如给容器去掉内边距，给行去掉外边距，然后给中间列自定义左边距来替代原有的边框间距：

<link rel=stylesheet href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<style>
  .custom-container {
    padding-left: 0;
    padding-right: 0;
  }
  .custom-row {
    margin-left: 0;
    margin-right: 0;
  }
  .custom-col:not(:first-child) {
    padding-left: 15px; /* 自定义列之间的间距大小 */
    border-left: 1px solid #dee2e6; /* 还原原有的左边框 */
  }
</style>
<div>
  <nav class="navbar">
    <div class="img">
      <img src="...">
    </div>
    <div class="img">
      <img src="...">
    </div>
  </nav>
</div>
<div class="container custom-container">
  <div class="row custom-row">
    <div class="col-md-3 custom-col" style="font-size:16px">
    </div>
    <div class="col-md-3 custom-col">
    </div>
    <div class="col-md-3 custom-col">
    </div>
    <div class="col-md-3 custom-col">
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者dark.vador