使用Bootstrap在屏幕上排列DIV

Question

我有一个包含1个可见DIV和2个隐藏DIV的页面。当我单击一个按钮时，我想按顺序显示所有3个DIV，如下所示。我正在使用Bootstrap。

发生的事情是Visible Div仅在Hidden Div 2之后出现

以下是代码：

<div id="divEditor" hidden class="col-sm-8">
    <textarea name="editor" id="editor"></textarea>
    <div class="col-sm-6 marginVert12">
       <a class="btn btn-single btn-gray pull-left" ng-click="stopEditing()"><i class="fa-angle-left"></i> Voltar</a>
    </div>
    <div class="col-sm-6 marginVert12">
        <label class="col-sm-8">
            <input type="text" placeholder="Nome" ng-model="nomeTemplate" class="form-control" />
        </label>
        <a class="btn btn-single btn-success col-sm-2" ng-click="stopEditing()"><i class="fa-save"></i> Guardar</a>
    </div>
</div>

<div id="divVariaveis" class="col-sm-4 divDetail">
    <h3 class="textAlign-Center">Variáveis</h3>
    <table class="table table-bordered">
        <thead>
           <tr>
              <th>Valor</th>
              <th>Texto</th>
           </tr>
        </thead>
        <tbody>
           <tr>
              <td>Número Contrato</td>
              <td>##contrato##</td>
           </tr>
           <tr>
              <td>Gestor de Conta</td>
              <td>##gc##</td>
           </tr>
           <tr>
              <td>Nome do Cliente</td>
              <td>##clienteNome##</td>
           </tr>
           <tr>
              <td>Nome do Cliente</td>
              <td>##clienteNome##</td>
           </tr>
           <tr>
              <td>Número Contrato</td>
              <td>##contrato##</td>
           </tr>
           <tr>
              <td>Gestor de Conta</td>
              <td>##gc##</td>
           </tr>
           <tr>
              <td>Nome do Cliente</td>
              <td>##clienteNome##</td>
           </tr>
           <tr>
              <td>Nome do Cliente</td>
              <td>##clienteNome##</td>
           </tr>
           <tr>
              <td>Número Contrato</td>
              <td>##contrato##</td>
           </tr>
           <tr>
              <td>Gestor de Conta</td>
              <td>##gc##</td>
           </tr>
           <tr>
              <td>Nome do Cliente</td>
              <td>##clienteNome##</td>
           </tr>
           <tr>
              <td>Nome do Cliente</td>
              <td>##clienteNome##</td>
           </tr>
        </tbody>
     </table>
  </div>   

  <div class="col-sm-8">
     <div class="col-sm-12 marginVert12">
        <a class="btn btn-single btn-success pull-right" ng-click="startEditing()" ng-class="editing ? 'disabled' : ''"><i class="fa-file-o"></i>  Novo Template</a>                        
     </div>
     <table class="table table-striped table-bordered table-hover" id="tblTemplates">
        <thead>
           <tr>
              <th>Nome</th>
              <th>Ações</th>                                
           </tr>
        </thead>
        <tbody>
           <tr>
              <td>Rodapé</td>
              <td><button class="btn btn-single btn-orange" ng-click="footerEditing()" ng-class="editing ? 'disabled' : ''"><i class="fa-edit"></i> Editar</button></td>
           </tr>
           <tr>
              <td>Carta Apresentação</td>
              <td>
                 <button class="btn btn-single btn-info pull-left" ng-class="editing ? 'disabled' : ''"><i class="fa-file-pdf-o"></i> Ver em PDF</button>
                 <button class="btn btn-single btn-orange pull-left" ng-click="cartaEditing()" ng-class="editing ? 'disabled' : ''"><i class="fa-edit"></i> Editar</button>
                 <button class="btn btn-single btn-danger pull-left" ng-class="editing ? 'disabled' : ''"><i class="fa-remove"></i> Remover</button>
              </td>
           </tr>
        </tbody>
     </table>                    
  </div>

Answer 1

这就是你想要安排它们的方式：

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <div class="row">
        <div class="col-sm-12"></div>
        <div class="col-sm-12"></div>
      </div>
    </div>
    <div class="col-sm-4"></div>
  </div>
</div>

您的col-sm-8内容应符合上述col-sm-12 s