为什么列重叠？

Question

请查看此example code以查看我的问题。 这是我的APT代码的一部分。

<div class="container-fluid">
  <form runat="server">
    <div class="row">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-4">
            <div class="page-header">
              <h1>
                Aluno! 
              </h1>
            </div>
            <asp:GridView ID="GridView1" runat="server" CssClass="table table-hover table-striped" GridLines="None" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" DataSourceID="SqlDataSource2" PageSize="20" Width="263px" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
              <Columns>
                <asp:CommandField ShowSelectButton="True" />
                <asp:BoundField DataField="id" HeaderText="id" InsertVisible="False" SortExpression="id" />
                <asp:BoundField DataField="nome" HeaderText="nome" SortExpression="nome" />
              </Columns>
              <SelectedRowStyle BackColor="#CCCCCC" Font-Bold="True" ForeColor="#0066FF" />
            </asp:GridView>
          </div>
          <div class="col-md-4">
            <div class="page-header">
              <h1>
                Disciplina!
              </h1>
            </div>
            <asp:GridView ID="GridView2" runat="server" CssClass="table table-hover table-striped" GridLines="None" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" DataSourceID="SqlDataSource3" PageSize="20" Width="458px" OnSelectedIndexChanged="GridView2_SelectedIndexChanged">
              <Columns>
                <asp:CommandField ShowSelectButton="True" />
                <asp:BoundField DataField="id" HeaderText="id" InsertVisible="False" SortExpression="id" />
                <asp:BoundField DataField="codigo" HeaderText="codigo" SortExpression="codigo" />
                <asp:BoundField DataField="descricao" HeaderText="descricao" SortExpression="descricao" />
                <asp:BoundField DataField="preco" HeaderText="Preço c/Iva" SortExpression="preco" />
              </Columns>
              <SelectedRowStyle BackColor="#CCCCCC" Font-Bold="True" ForeColor="#0066FF" />
            </asp:GridView>
          </div>
          <div class="col-md-4">
            <div class="page-header">
              <h1>
                Movimento!
              </h1>
            </div>
            <form role="form">
              <div class="form-group">
                <label for="valopago">
                  Valor Pago
                </label>
                <asp:TextBox ID="valorpago" CssClass="form-control" runat="server"></asp:TextBox>
              </div>
              <div class="form-group">
                <label for="datamovimento">
                  Data Pagamento
                </label>
                <asp:TextBox ID="datamovimento" runat="server" CssClass="form-control"></asp:TextBox>
              </div>
              <div class="form-group">
                <label for="txtdescritivo">
                  Descritivo Pagamento
                </label>
                <asp:TextBox ID="txtdescritivo" runat="server" CssClass="form-control"></asp:TextBox>
              </div>
              <br /> Aluno:
              <asp:Label ID="lblnumeroaluno" runat="server" Text=""></asp:Label>
              <asp:Label ID="lblAluno" runat="server" Text=""></asp:Label>
              <br /> Disciplina:
              <asp:Label ID="lblcodigodisciplina" runat="server" Text=""></asp:Label>
              <asp:Label ID="lblDisciplina" runat="server" Text=""></asp:Label>
              <br />
              <asp:Button ID="Button1" runat="server" Text="Gravar" CssClass="btn btn-success form-control" OnClick="Gravar_Movimento" />
            </form>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

任何人都可以帮助我理解为什么我会看到这个结果吗？为什么Movimento专栏与Disciplina专栏重叠？

谢谢。