用gulp任务内联CSS会弄乱布局

Question

我有一个电子邮件模板，我正在用gulp内联所有CSS。 除了我自己的样式表之外，我还使用了名为bsgrid.css的引导网格样式，将两个CSS合并为1个文件。当我从计算机上检查它时，它可以正常工作。但是在插入CSS时，它破坏了布局，布局看起来像这样。 https://prnt.sc/k147ym，但在插入布局之前看起来还可以，布局看起来像这样https://i.imgur.com/Lg1uURZ.png 我正在使用以下javascript代码内联所有CSS。

var gulp = require('gulp'), inlineCss = require('gulp-inline-css');

gulp.task('default', function() {
  return gulp.src('public/index.html')
    .pipe(inlineCss( {
      applyStyleTags: true,
      applyLinkTags: true,
      removeStyleTags: true,
      removeLinkTags: true
    }))
  .pipe(gulp.dest('build/'));
});

我的codepen位于：https://codepen.io/anon/pen/GGzKZv