Question

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

这是全宽： Here's full width

这是移动宽度（ish）： Here's mobile width

我希望该摘要出现在Volume＆amp;费用很好，就其自身而言，与其他水井不重叠。

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

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

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

Bootstrap 3：在浏览器调整大小时显示其井内的面板

1 个答案: