我试图弄清楚如何用 Bootstrap 做下面的网格。
我不确定如何创建跨越两行的框(编号 1)。这些框是按照它们的布局顺序以编程方式生成的。方框 1 是欢迎信息。
关于最好的方法的任何想法?
对于引导程序 3:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-md-4"> <div class="well">1 <br/> <br/> <br/> <br/> <br/> </div> </div> <div class="col-md-8"> <div class="row"> <div class="col-md-6"> <div class="well">2</div> </div> <div class="col-md-6"> <div class="well">3</div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="well">4</div> </div> <div class="col-md-6"> <div class="well">5</div> </div> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="well">6</div> </div> <div class="col-md-4"> <div class="well">7</div> </div> <div class="col-md-4"> <div class="well">8</div> </div> </div>
对于引导程序 2:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="row-fluid"> <div class="span4"><div class="well">1<br/><br/><br/><br/><br/></div></div> <div class="span8"> <div class="row-fluid"> <div class="span6"><div class="well">2</div></div> <div class="span6"><div class="well">3</div></div> </div> <div class="row-fluid"> <div class="span6"><div class="well">4</div></div> <div class="span6"><div class="well">5</div></div> </div> </div> </div> <div class="row-fluid"> <div class="span4"> <div class="well">6</div> </div> <div class="span4"> <div class="well">7</div> </div> <div class="span4"> <div class="well">8</div> </div> </div>
请参阅 JSFiddle (Bootstrap 2) 上的演示:http: //jsfiddle.net/SxcqH/52/