我正在用Bootstrap创建一个两列的样机站点，并且在左下部分（当前要价）弄乱了cols / div的结构。默认填充会导致嵌套的cols更深的问题。
实现基本布局的最简单方法是什么？
我去了，但是不好。
<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 »</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>
最佳答案
这是一个可能的解决方案：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>
关于html - 多级嵌套Bootstrap结构布局建议？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33295595/