如何堆叠< fieldset>而不会影响面板类的引导程序？ [英] How to stack the <fieldset> on top of each other without affecting the panel class of bootstrap?

问题描述

我需要将字段集堆叠在一起，以便我可以使用jquery调用下一个字段集。
显示第一个字段集，其他两个隐藏。
当我的用户位置：绝对，它将堆叠在彼此的顶部，但引导面板会受到影响，并且表单会超出面板。
如何做到这一点，使面板不受影响？

I need to stack the fieldsets on top of each other so that i can call next fieldsets using jquery. First fieldset is shown while the other two are hidden. When i user position:absolute, it will stack on top of each other but the bootstrap panel gets affected and the form goes outside of the panel. how do i do this such that the panel doesnt get affected.?

#msform fieldset {
  /*stacking fieldsets above each other*/
  position: absolute;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
  display: none;
}

<div class="panel panel-default">
  <div class="panel-body">
    <!-- ===================================== -->
    <!-- MULTI STEP FORM -->


    <form id="msform" class="black-color">
      <!-- fieldsets -->
      <fieldset >

      </fieldset>

      <fieldset>

      </fieldset>

      <fieldset>

      </fieldset>
    </form>
    <!-- MULTI STEP FORM -->
    <!-- ===================================== -->
  </div>
</div>

jsfiddle here

推荐答案

你是否在寻找像这样的东西，就像在堆叠中一样？

Are you looking for something like this, as in stacked?

#msform fieldset {
  /*stacking fieldsets above each other*/
  position: absolute;
  width: 100px;
  height: 100px;
}
/*Hide all except first fieldset*/
/*#msform fieldset:not(:first-of-type) {
  display: none;
}
*/
#msform fieldset:nth-child(1) {
  top: 5px;
  left: 5px;
}
#msform fieldset:nth-child(2) {
  top: 10px;
  left: 10px;
}
#msform fieldset:nth-child(3) {
  top: 15px;
  left: 15px;
}

<div class="panel panel-default">
  <div class="panel-body">
    <!-- ===================================== -->
    <!-- MULTI STEP FORM -->


    <form id="msform" class="black-color">
      <fieldset >

      </fieldset>

      <fieldset>

      </fieldset>

      <fieldset>

      </fieldset>
    </form>
    <!-- MULTI STEP FORM -->
    <!-- ===================================== -->
  </div>
</div>

这篇关于如何堆叠< fieldset>而不会影响面板类的引导程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！