在引导程序中创建行跨度
[英] Create a rowspan in bootstrap
本文介绍了在引导程序中创建行跨度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想用这张图片创建一个 boostrap 标记定义:
如果第 1 行、第 2 行和第 3 行共享相同的 div/列，我该怎么办?
如果我要设计表格，那么我会使用 rowspan...
更新
使用较大的窗口调整大小的行为不好(见按钮)
使用较小的窗口更好的调整大小行为(见按钮)
代码如下:
<div class="span6"><div class="row"><div class="span3">xxxxxxxxxxxx 名称</div><div class="span3"><input type="text" class="text"/>
<div class="row"><div class="span3">xxxxxxxxxxxxxx 来自</div><div class="span3"><input type="text" class="text"/>
<div class="row"><div class="span3">xxxxxxxxxxxx 到</div><div class="span3"><input type="text" placeholder="请输入结束日期" class="text"/>
<div class="span3"><input type="checkbox" class="checkbox" value="Green melons"/>LightBlue Peaaaas<br/><input type="checkbox" class="checkbox" value="绿瓜"/>蓝瓜<br/><input type="checkbox" class="checkbox" value="青瓜"/>红苹果<br/><input type="checkbox" class="checkbox" value="青瓜"/>黄香蕉<br/><input type="checkbox" class="checkbox" value="青瓜"/>黑蘑菇<br/><input type="checkbox" class="checkbox" value="Green melons"/>粉色百慕大<br/>
<div class="span3"><div class="row"><div class="span3"><span>一周的第一天</span>
<div class="row"><div class="span3"><input type="radio" class="radio"/>星期一
<div class="row"><div class="span3"><input type="radio" class="radio"/>星期二
<div class="row"><div class="span12"><button class="btn pull-right">下一步</button>
更新
杰克在 IE 10 上的小提琴也有不好的调整大小行为，你可以从潜入左侧文本框的复选框中判断:
解决方案
试试这个
<div class="span6"><div class="row"><div class="span3"></div><div class="span3"></div>
<div class="row"><div class="span3"></div><div class="span3"></div>
<div class="row"><div class="span3"></div><div class="span3"></div>
<div class="span3">
<div class="span3"><div class="row"><div class="span3"></div>
<div class="row"><div class="span3"></div>
<div class="row"><div class="span3"></div>
<div class="row"><div class="span12"></div>
I want to create a boostrap markup definition with this image:
What do I have to do that row1, row2 and row3 share the same div/column?
If I would do table design then I would use a rowspan...
UPDATE
Bad resizing behavior with a larger window (see button)
Better resizing behavior with a smaller window (see button)
Thats the code:
<div class="row">
<div class="span6">
<div class="row">
<div class="span3">xxxxxxxxxxxx name</div>
<div class="span3">
<input type="text" class="text" />
</div>
</div>
<div class="row">
<div class="span3">xxxxxxxxxxxxxx from</div>
<div class="span3">
<input type="text" class="text" />
</div>
</div>
<div class="row">
<div class="span3">xxxxxxxxxxxx to</div>
<div class="span3">
<input type="text" placeholder="Please enter the end date" class="text" />
</div>
</div>
</div>
<div class="span3">
<input type="checkbox" class="checkbox" value="Green melons" />LightBlue Peaaaas<br />
<input type="checkbox" class="checkbox" value="Green melons" />Blue Melons<br />
<input type="checkbox" class="checkbox" value="Green melons" />Red Apples<br />
<input type="checkbox" class="checkbox" value="Green melons" />Yellow Bananas<br />
<input type="checkbox" class="checkbox" value="Green melons" />Black Mushis<br />
<input type="checkbox" class="checkbox" value="Green melons" />Pink Bermudas<br />
</div>
<div class="span3">
<div class="row">
<div class="span3">
<span>First day of week</span>
</div>
</div>
<div class="row">
<div class="span3">
<input type="radio" class="radio" />Monday
</div>
</div>
<div class="row">
<div class="span3">
<input type="radio" class="radio" />Tuesday
</div>
</div>
</div>
</div>
<div class="row">
<div class="span12">
<button class="btn pull-right">Next</button>
</div>
</div>
UPDATE
The fiddle from Jack on IE 10 has also bad resizing behavior as you can judge from the checkboxes diving into the left textboxes:
解决方案
Try this
<div class="row">
<div class="span6">
<div class="row">
<div class="span3"></div>
<div class="span3"></div>
</div>
<div class="row">
<div class="span3"></div>
<div class="span3"></div>
</div>
<div class="row">
<div class="span3"></div>
<div class="span3"></div>
</div>
</div>
<div class="span3">
</div>
<div class="span3">
<div class="row">
<div class="span3"></div>
</div>
<div class="row">
<div class="span3"></div>
</div>
<div class="row">
<div class="span3"></div>
</div>
</div>
</div>
<div class="row">
<div class="span12"></div>
</div>
这篇关于在引导程序中创建行跨度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
