Javascript 如何将内容放入面板主体中？

我试着用JSFIDLE做一个河内塔的演示

问题 我在Bootstrap.css中使用了面板组件，问题是我无法将我的河内塔放入面板主体

像这样：
（来源：）

但当我改变

#peg1 {
    position:absolute;
    top:50px;
    left:50px;
}

到

我明白了：

（来源：）

我的问题

---

如何将河内塔放置在面板主体中，使其具有正确的销钉位置？

将塔放置在面板中的一种方法：

这种方式不使用绝对位置

Bootply：

CSS：

.peg {
    width:10px;
    height:120px;
    background:black;
    margin : 0px 50px 0px 40px;
    display:inline-block;
}

#base {
    margin-left:20px;
    margin-top:-5px;
    width:270px;
    height:15px;
    background:black;
}

HTML

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">Hanoi Tower</div>
        <div class="panel-body">
            <div id="hanoi col-xs-12">
                <div class="peg" id="peg1"></div>
                <div class="peg" id="peg2"></div>
                <div class="peg" id="peg3"></div>
                <div class="disc" id="disc1"></div>
                <div class="disc" id="disc2"></div>
                <div class="disc" id="disc3"></div>
                <div class="disc" id="disc4"></div>
                <div class="disc" id="disc5"></div>
                <div id="base"></div>
            </div>
        </div>
    </div>
</div>

汉诺塔

尝试指定

面板主体的高度，例如：

.panel-body{
    height:200px;
}

销钉的正确位置是什么？你的位置是静态的吗不是一个好的解决方案，因为结果不正确，或者因为这不是一个长期的解决方案？@Anthony正确的位置在image1中，但它不在面板主体中。“绝对定位的元素从流中移除”——这显然是个问题。解决方法是使用另一种方法（如建议的方法）来拉伸div，而不是使用position方法。这样包装器就不会“空”并保持其高度。唯一的缺点是，它在视觉上看起来是正确的，但元素仍然没有实际“包含”在div中，因此高度永远无法根据子元素的高度进行真正的动态调整（因此，调整大小或使用流体单位等都不起作用）。
.panel-body{
    height:200px;
}