根据其他面板高度Bootstrap自动调整位置高度

时间:2018-01-03 20:02:19

标签: html twitter-bootstrap

所以,我对编程很陌生,而且我偶然发现了这个问题:我有一些可折叠的面板,它们可以自动定位,但它们位于同一排:当我打开一个面板时,所有都在侧面板下面转向底部。我希望他们将他们的身高位置调整到以前的位置。我正在使用Boostrap Sas 3.图像会更清晰

现在有什么意思: image 我想要发生什么: image

我的代码:

<div class='form-group'>
  <label class='control-label col-sm-3'>Belongs to:</label>
  <div class="col-sm-9">
    <div class="panel-group">
        <div class="col-sm-4">
          <div class="panel panel-default" style="margin-bottom: 7px">
            <div class="panel-heading" style="padding: 5px">
              <label data-toggle="collapse" data-target="#collapse2" style="margin-left: 5px; margin-bottom:0px">
                <input type="checkbox" name="" id="" value="2" /> org
              </label>
            </div>
            <div class="panel-body collapse" id="collapse2" style="padding: 5px">
                  <label style="margin-left: 15px; margin-bottom:0px">
                    <input type="checkbox" name="" id="" value="1" />
                    sub
                  </label><br>
                  <label style="margin-left: 15px; margin-bottom:0px">
                    <input type="checkbox" name="" id="" value="2" />
                    sub2
                  </label><br>
            </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="panel panel-default" style="margin-bottom: 7px">
            <div class="panel-heading" style="padding: 5px">
              <label data-toggle="collapse" data-target="#collapse3" style="margin-left: 5px; margin-bottom:0px">
                <input type="checkbox" name="" id="" value="3" /> org2
              </label>
            </div>
            <div class="panel-body collapse" id="collapse3" style="padding: 5px">
                  <label style="margin-left: 15px; margin-bottom:0px">
                    <input type="checkbox" name="" id="" value="3" />
                    SubTes
                  </label><br>
            </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="panel panel-default" style="margin-bottom: 7px">
            <div class="panel-heading" style="padding: 5px">
              <label data-toggle="collapse" data-target="#collapse4" style="margin-left: 5px; margin-bottom:0px">
                <input type="checkbox" name="" id="" value="4" /> org3
              </label>
            </div>
            <div class="panel-body collapse" id="collapse4" style="padding: 5px">
                  <label style="margin-left: 15px; margin-bottom:0px">
                    <input type="checkbox" name="" id="" value="4" />
                    SubTest
                  </label><br>
                  <label style="margin-left: 15px; margin-bottom:0px">
                    <input type="checkbox" name="" id="" value="5" />
                    subga
                  </label><br>
            </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="panel panel-default" style="margin-bottom: 7px">
            <div class="panel-heading" style="padding: 5px">
              <label data-toggle="collapse" data-target="#collapse5" style="margin-left: 5px; margin-bottom:0px">
                <input type="checkbox" name="" id="" value="5" /> gar
              </label>
            </div>
            <div class="panel-body collapse" id="collapse5" style="padding: 5px">
                  <label style="margin-left: 15px; margin-bottom:0px">
                    <input type="checkbox" name="" id="" value="6" />
                    gargag
                  </label><br>
                  <label style="margin-left: 15px; margin-bottom:0px">
                    <input type="checkbox" name="" id="" value="7" />
                    graga
                  </label><br>
                  <label style="margin-left: 15px; margin-bottom:0px">
                    <input type="checkbox" name="a" id="" value="8" />
                    gara
                  </label><br>
            </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="panel panel-default" style="margin-bottom: 7px">
            <div class="panel-heading" style="padding: 5px">
              <label data-toggle="collapse" data-target="#collapse6" style="margin-left: 5px; margin-bottom:0px">
                <input type="checkbox" name="" id="" value="6" /> gragag
              </label>
            </div>
            <div class="panel-body collapse" id="collapse6" style="padding: 5px">
                  <label style="margin-left: 15px; margin-bottom:0px">
                    <input type="checkbox" name="" id="" value="9" />
                    gragagarg
                  </label><br>
                  <label style="margin-left: 15px; margin-bottom:0px">
                    <input type="checkbox" name="" id="" value="10" />
                    argga
                  </label><br>
                  <label style="margin-left: 15px; margin-bottom:0px">
                    <input type="checkbox" name="a" id="" value="11" />
                    ragrg
                  </label><br>
            </div>
          </div>
        </div>
    </div>
  </div>
</div>

提前致谢

0 个答案:

没有答案