Bootstrap 3：在浏览器调整大小时在其井中显示面板答案

【问题标题】：Bootstrap 3: Display panels inside their wells on browser resizeBootstrap 3：在浏览器调整大小时在其井中显示面板
【发布时间】：2014-02-07 11:36:19
【问题描述】：

当浏览器窗口调整大小（尤其是移动设备的宽度）时，如何让这些面板留在它们的井中？最好也调整井的大小。我也有一些重叠的问题。

这是全宽：

这是移动宽度（ish）：

我希望该摘要很好地出现在 Volume & Fees 中，单独一行，不与其他井重叠。

这是 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;
}

如果您有任何问题，请告诉我！

【问题讨论】：

您是否尝试过使用col-xs-* 类？
还没有 - 我会试一试。一开始不应该忽视这一点。我在LayoutIt 上设计了布局，它只给了我 md 大小的类。谢谢，漂流！我会回来报告的！
工作就像一个魅力！向孔和孔内的每个面板添加了 col-xs-12 类。谢谢！编辑：@Adrift - 如果你想发布一个带有答案的帖子，我很乐意给你信用！

标签： html css twitter-bootstrap-3 panel

【解决方案1】：

如何让这些面板在调整浏览器窗口大小时留在其井中

只需使用.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">

【讨论】：