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

Question

我尝试在jsfiddle中制作一个hanoi塔演示。

DEMO

The Promblem

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

像这样： before change position http://wuzhiwei.net/problems/out-b.png

但是当我改变时

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

到

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

我明白了：

after change position http://wuzhiwei.net/problems/in-b.png

我的问题

我怎样才能将河内塔放在面板的正确位置？

Answer 1

将您的塔放入面板的一种方法：

这种方式不使用绝对位置

Bootply ：http://www.bootply.com/122444

<强> 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>

Answer 2

尝试将高度指定为.panel-body，例如：

.panel-body{
    height:200px;
}