我怎样才能得到一个Bootstrap列跨越多行?
我试图找出如何使用Bootstrap执行以下网格。
我不知道如何创build跨两行的框(数字1)。 这些框按照它们的布局顺序以编程方式生成。 方框1是一个欢迎消息。
任何想法最好的方式去与此?
对于Bootstrap 3:
<link href="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>
就像意见所示,解决scheme是使用嵌套跨度/行。
<div class="container"> <div class="row"> <div class="span4">1</div> <div class="span8"> <div class="row"> <div class="span4">2</div> <div class="span4">3</div> </div> <div class="row"> <div class="span4">4</div> <div class="span4">5</div> </div> </div> </div> <div class="row"> <div class="span4">6</div> <div class="span4">7</div> <div class="span4">8</div> </div> </div>
下面的例子似乎工作。 只要在第一个元素上设置一个高度
<ul class="row"> <li class="span4" style="height: 100px"><h1>1</h1></li> <li class="span4"><h1>2</h1></li> <li class="span4"><h1>3</h1></li> <li class="span4"><h1>4</h1></li> <li class="span4"><h1>5</h1></li> <li class="span4"><h1>6</h1></li> <li class="span4"><h1>7</h1></li> <li class="span4"><h1>8</h1></li> </ul>
我不禁想到这是一个错误的使用行。