为什么我在bootstrap中再添加一个col，它就会失效

Question

当我添加col number 1时，col number 2会下降。如果我删除了第1列，第2列，它就像第3号那样简单。我不知道这会发生什么？

Answer 1

不希望您的列只是在某些网格层中堆叠？根据需要为每个层使用不同类的组合。请参阅下面的示例，以便更好地了解它是如何工作的。

了解它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>

Answer 2

可能是因为您可能在col2中使用col1添加col1。 你的部门应该是

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

Answer 3

我改变了你的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 ..