html - 将嵌套面板拉伸(stretch)到父面板的宽度

Question

我在另一个 Bootstrap 面板中有一个嵌套的 Bootstrap 面板(见图)。如何使面板拉伸(stretch)到父面板的宽度？澄清一下，我不希望嵌套面板与其父面板一样宽，而是从它开始的任何地方延伸到父面板的宽度。

因此，如果您查看图像，我希望面板向右侧拉伸(stretch)(它的宽度将接近父面板的一半)。

如果我要缩小屏幕尺寸的宽度，那么面板应该位于图表下方(目前是这样)，并拉伸(stretch)到右侧。

这是我的代码:

       <div class="panel panel-primary" style="border-color: #464646;">
            <div class="panel-heading" style="border-color: #BBBBBB; height: 35px; padding-top: 3px;">
                <div style="float: left; margin-top: 5px;">Chart</div>
            </div>

            <div class="panel-body">
                <!--Chart-->
                <div style="display: inline-block;">
                    <canvas id="myChart" width="325" height="325"></canvas>
                </div>

                <!--Panel to Stretch-->
                <div style="display: inline-block; vertical-align:top;">
                    <div class="panel panel-primary" style="border-color: #464646;">
                        <div class="panel-heading" style="border-color: #BBBBBB; height: 35px; padding-top: 3px;">
                            <div style="float: left; margin-top: 5px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Answer 1

给图表和嵌套面板一个列类怎么样？我觉得没问题:

    <div class="panel panel-primary" style="border-color: #464646;">
        <div class="panel-heading" style="border-color: #BBBBBB; height: 35px; padding-top: 3px;">
            <div style="float: left; margin-top: 5px;">Chart</div>
        </div>

        <div class="panel-body">
            <!--Chart-->
            <div class="col-sm-6">
                <canvas id="myChart" width="325" height="325"></canvas>
            </div>

            <!--Panel to Stretch-->
            <div class="col-sm-6">
                <div class="panel panel-primary" style="border-color: #464646;">
                    <div class="panel-heading" style="border-color: #BBBBBB; height: 35px; padding-top: 3px;">
                        <div style="float: left; margin-top: 5px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>