这可能是因为您可能会将col1与col2添加到同一个div中。

<div><!-- left section -->
col-3
</div>
<div><!-- center section -->
col-1
</div>
<div><!-- right section -->
col-2
</div>

不希望列只是简单地堆叠在一些网格层中？根据需要为每个层使用不同类的组合。请参阅下面的示例以更好地了解其工作原理。

学习它https://getbootstrap.com/docs/4.0/layout/grid/#auto-layout-columns

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

我改变你的html

致

<div class="row">
  <div class="col-xs-2" style="height:800px;border: 1px solid red;"><span class="left"></span></div>
  <div  class="col-xs-8 row">
    <div class="col-xs-12" style="height:595px;border: 1px solid black;"> <span class="center"></span></div>
    <div class="col-xs-12" style="height:205px;border: 1px solid blue;"> <span class="center"></span></div>
  </div>
  <div class="col-xs-2" style="height:800px;border: 1px solid red;"><span class="right"></span></div>

</div>

这是一个jsfiddle ..