html - Bootstrap 3 : Display panels inside their wells on browser resize

Question

当浏览器窗口调整大小时(特别是调整到移动设备的宽度)，我怎样才能让这些面板留在它们的井中？最好也调整井的大小。我也有一些重叠的问题。

这是全宽:

这是移动宽度(ish):

我希望该摘要单独显示在“交易量和费用”栏中，不要与其他栏重叠。

这是 HTML:

<div class="container"> 
<div class="row clearfix" id="content-row">     
    <div class="col-md-12 column">
        <div class="well" id="volume-fees-well">
            <div class="row clearfix" id="volume-fees-row">                                                
                <div class="col-md-9 column" id="volume-fees-chart">
                    <div class="panel panel-primary" id="volume-fees-panel">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                Volume &amp; Fees
                            </h3>
                        </div>
                        <div class="panel-body">
                            <svg></svg>
                        </div>                      
                    </div>                                      
                </div>
                <div class="col-md-3 column">
                    <div class="panel panel-primary" id="volume-fees-summary-panel">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                Summary
                            </h3>
                        </div>
                        <div class="panel-body">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="well" id="vehicle-class-well">

我为图表使用 D3，这就是 svg 的用途。

我使用的是 Bootswatch Yeti 主题和标准的 Bootstrap.css。我从 Bootstrap.css 覆盖的唯一 CSS 是:

#content-row {
margin-top: 50px;
}

#volume-fees-row, #vehicle-class-row, #consignor-map-row, #buyer-map-row {
    height: 450px;
}

.panel {
    max-width: 100%;
}

.panel-body {
    height: 400px;
}

如有任何问题，请告诉我!

Answer 1

How can I get these panels to stay inside their wells when the browser window is resized

只需使用 .col-xs-*类(而不是 col-md-*):

<div class="container"> 
<div class="row clearfix" id="content-row">     
    <div class="col-xs-12 column">
    <div class="well" id="volume-fees-well">
        <div class="row clearfix" id="volume-fees-row">                                                
            <div class="col-xs-9 column" id="volume-fees-chart">
                <div class="panel panel-primary" id="volume-fees-panel">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            Volume &amp; Fees
                        </h3>
                    </div>
                    <div class="panel-body">
                        <svg></svg>
                    </div>                      
                </div>                                      
            </div>
            <div class="col-xs-3 column">
                <div class="panel panel-primary" id="volume-fees-summary-panel">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            Summary
                        </h3>
                    </div>
                    <div class="panel-body">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="well" id="vehicle-class-well">