多级嵌套引导程序结构布局建议？

时间：2015-10-23 05:44:15

标签： html css twitter-bootstrap

我正在制作一个带有Bootstrap＆amp; amp;的两列模型站点。我正在弄乱左下角部分（当前报价）中cols / div的结构。默认填充导致更深层嵌套cols的问题。

实现基本布局的最简单方法是什么？

enter image description here

我走了但是不好。

        <div class="container">
    <div class="row">
        <div id="main-col" class="col-xs-12 col-md-8">
            <div class="row intro-article">
                <div class="col-xs-12 col-sm-3 col-md-3">
                    <img src="images/gail-kelly.jpg" class="img-responsive" alt="Gail Kelly">
                </div>
                <div class="col-xs-12 col-sm-9 col-md-9 no-padding-left">
                    <h2>Last Quarter Trading Forecast 2015</h2>
                    <p>Growth to December 2015 is forecast at 2.5% compared to 2.75% in the February Statement and forecast growth to December 2016 has been lowered from 3.5% to 3.25%. These changes are in accordance with our expectations and of course provide convincing justification for the decision to cut rates by 0.25% at the July Board meeting.</p>
                    <div class="col-xs-12 text-center">
                        <a class="link-button red-gradient main-cta" href="#">Latest CEO report &raquo;</a>
                    </div>
                </div>
            </div>
            <div class="row current-offers">
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="col-xs-4 col-sm-6 col-md-6">
                        <img class="img-responsive" src="images/home-loan-house.jpg" alt="Home Loans">
                    </div>
                    <div class="col-xs-8 col-sm-6 col-md-6 no-padding-left"><!--col-sm-9 col-md-9 -->
                    <h4>Sub Section 1</h4>
                    <p>For the 3rd year in a row, Bank has won Canstar’s Bank of the Year, for First Home Buyers.</p>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="col-xs-4 col-sm-6 col-md-6">
                        <img class="img-responsive" src="images/home-loan-house.jpg" alt="Home Loans">
                    </div>
                    <div class="col-xs-8 col-sm-6 col-md-6">
                    <h4>Sub Section 2</h4>
                    <p>For the 3rd year in a row, Bank has won Canstar’s Bank of the Year, for First Home Buyers.</p>
                    </div>
                </div>
            </div>
            <div class="row current-offers">
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="col-xs-4 col-sm-6 col-md-6">
                        <img class="img-responsive" src="images/home-loan-house.jpg" alt="Home Loans">
                    </div>
                    <div class="col-xs-8 col-sm-6 col-md-6 no-padding-left"><!--col-sm-9 col-md-9 -->
                    <h4>Sub Section 3</h4>
                    <p>For the 3rd year in a row, Bank has won Canstar’s Bank of the Year, for First Home Buyers.</p>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="col-xs-4 col-sm-6 col-md-6">
                        <img class="img-responsive" src="images/home-loan-house.jpg" alt="Home Loans">
                    </div>
                    <div class="col-xs-8 col-sm-6 col-md-6">
                    <h4>Sub Section 4</h4>
                    <p>For the 3rd year in a row, Bank has won Canstar’s Bank of the Year, for First Home Buyers.</p>
                    </div>
                </div>
            </div>
        </div>
        <div id="side-col" class="col-xs-12 col-md-4" style="height:500px;">
            <h2>Side Col</h2>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分：0)

这是一个可能的解决方案：https://jsfiddle.net/z4b2bwg6/19/

以下给出的结构非常易于理解，我希望它能让您了解如何开始构建布局。

HTML结构： 

<div class="container">
    <div class="row">
        <div class="col-xs-2">
            <div class="row"> 
                <img src="https://cdn0.iconfinder.com/data/icons/user-pictures/100/male-128.png"/>
            </div>
            <div class="row">  
                <img src="https://cdn0.iconfinder.com/data/icons/flat-color-icons/504/home-128.png"/>
            </div>
            <div class="row"> 
                <img src="https://cdn1.iconfinder.com/data/icons/IconsLandVistaPeopleIconsDemo/128/Group_Meeting_Dark.png"/>
            </div>
        </div>
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-12">
                    <h4>Last Quarter Trading Forecast 2015</h2>
                    <p>
                        some content some content some content some content some content some content some content some content some content some content some content           
                    </p>
                    <div class="text-center">
                        <button type="button" class="btn btn-danger">Latest CEO Report >></button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-4">
                    <h6>Australian lowest rate home loans</h5>
                    <p>
                        some content some content
                    </p>
                    <button type="button" class="btn btn-danger btn-xs">Request Home</br>  Loan Quote >></button>
                </div>
                <div class="col-xs-4">
                                    <img src="https://cdn0.iconfinder.com/data/icons/user-pictures/100/male-128.png"/>
                </div>
                <div class="col-xs-4">
                    <h6>Australian lowest rate home loans</h5>
                    <p>
                        some content some content
                    </p>
                    <button type="button" class="btn btn-danger btn-xs">Request Home </br> Loan Quote >></button>
                </div>
            </div>
        </div>
        <div class="col-xs-3">
            <div class="row">
                <div class="col-xs-12">
                    <h5>ATM & Branch Locations</h5>
                    <p>some content some content some content</p>                    
                </div>
            </div>           
            <div class="row">
                <div class="col-xs-12">
                    <h5>Customer Serive</h5>
                    <p>some content some content some content</p> 
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <h5>Business Service</h5>
                    <p>some content some content some content</p> 
                </div>
            </div>
             <div class="row">
                <div class="col-xs-12">
                    <h5>Trading Growth Investment</h5>
                    <p>some content some content some content</p> 
                </div>
            </div>
        </div>
    </div>
</div>
相关问题
最新问题