使用Bootstrap时去除边距方法及全屏下列排版错位问题求助

一、去除页面边距 #

Bootstrap默认给body设置了margin: 8px，同时.container类自带左右内边距，要彻底去除页面边距可以从这两个点入手：

• 重置body默认外边距：可以自定义CSS，或者直接给body添加Bootstrap内置的m-0工具类

  body {
    margin: 0;
  }
  

• 调整容器内边距：如果需要全屏宽度布局，推荐用.container-fluid替代.container（它会占满视口宽度）；如果一定要保留.container，可以给它添加p-0类清除左右内边距，或者自定义CSS：

  .container {
    padding-left: 0;
    padding-right: 0;
  }
  

二、修复列换行问题 #

看你的代码，核心问题是**h2直接放在了.row容器内**——Bootstrap的.row是弹性布局容器，它的直接子元素必须是.col-*开头的列元素，否则会破坏网格布局规则。你的h2是块级元素，会占据整行宽度，再加上可能的样式冲突，就导致后续列出现异常换行。

正确的做法是把h2包裹在全宽列里，或者移到.row外面，下面是修正后的完整代码：

<div class="products">
  <!-- 用container-fluid + p-0实现全屏无内边距 -->
  <div class="container-fluid p-0">
    <!-- 标题单独占一行，用row包裹col-12 -->
    <div class="row">
      <div class="col-12">
        <h2>Products</h2>
      </div>
    </div>
    <!-- 产品列的独立row -->
    <div class="row">
      <div class="col-sm-3">
        <div id="cat-1">
          <p>1</p>
        </div>
      </div>
      <div class="col-sm-3">
        <div id="cat-2">
          <p>2</p>
        </div>
      </div>
      <div class="col-sm-3">
        <div id="cat-3">
          <p>3</p>
        </div>
      </div>
      <div class="col-sm-3">
        <div id="cat-4">
          <p>4</p>
        </div>
      </div>
    </div>
  </div>
</div>

调整后，标题会单独占一行，四个产品列在大于等于768px的屏幕上会稳定保持在同一行，同时通过container-fluid p-0和body m-0可以完全去除页面边距。另外如果你的.products类有自定义的padding或margin，也建议检查这些样式是否会影响整体布局。

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