简体   繁体   中英

Bootstrap 3: Display panels inside their wells on browser resize

How can I get these panels to stay inside their wells when the browser window is resized (particularly to the width of a mobile device)? It'd probably be best to resize the well too. I have some overlapping issues as well.

Here's full width: 这是全宽

Here's mobile width (ish): 这是移动宽度

I'd like that Summary to be in the Volume & Fees well, on its own line, not overlapping with the other wells.

Here's the 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">

I'm using D3 for the charts, which is what the svg is for.

I'm using the Bootswatch Yeti theme and the standard Bootstrap.css. The only CSS I've overridden from the Bootstrap.css is:

#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;
}

Please let me know if you have any questions!

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

Just use the .col-xs-* class (instead of 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">

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM