3列，显示一个div而不是最后一列并找到最后一个折线图

Question

我有 3 列，我想在保留我的响应页面的同时显示一个表单来代替最后一列。我可以使用 Jquery 动态创建几行。现在我的 div 在网格下方。是否可以通过单击按钮在右侧显示表单？

<div class="addLine">
    <div class="row" >
       <div class="col-md-4">
        {{>graph1}}
      </div>
      <div class="col-md-4">
        {{>graph2}}
      </div>
      <div class="col-md-4">
          {{> graph3}}
      </div>
    </div>  
   </div>
   <div class="showForm"> {{>form}}</div>
</div>

<template name="graph1">
  <div class="zone" id="zone-0_1" >
    <svg class ="insert" id="graphItem0_1" with="300" height="300"></svg>
      <p class="glyphicon glyphicon-chevron-down" id="form"></p>
    </div>
</template>

<template name="graph2">
    <div class="zone" id="zone-0_2" >
      <svg class ="insert" id="graphItem0_2" with="300" height="300"></svg>
      <p class="glyphicon glyphicon-chevron-down" id="form"></p>
    </div>
</template>


<template name="graph3">
    <div class="zone" id="zone-0_3">
      <svg class ="insert" id="graphItem0_3" with="300" height="300"></svg>
      <p class="glyphicon glyphicon-chevron-down" id="form"></p>
    </div>
</template>

Answer 1

您可以使用 CSS visibility 属性。默认设置为hidden，点击设置为visible。