<div class="row"> <div class="span8"> <div class="well well-large"> <h3>Place an Order</h3> <div class="row"> <div class="span3">Bid Price</div> <div class="span2">Execute</div> <div class="span3">Ask Price</div> </div> </div>
那是我的结构.买入价,执行价和卖出价应该都在同一行.因为他们在井里,他们似乎没有.这种已知的行为是否存在?
解决方法
问题是填充和井元素的边界.当在正常行内时,span8类具有620px的固定宽度.
大型元素的填充为24px(绿色部分),边界为1px,因此嵌套行将位于蓝色部分内.但蓝色部分的宽度不是620px,宽度为570px.
嵌套行内的span元素也具有固定宽度. span2的宽度为140px,span3的宽度为220px.
如果添加span元素及其边距的所有宽度(220px 140px 220px(20px * 2)= 620px),则行的总宽度大于井元素(570px),因此最后一个元素被推送到下一行.
怎么解决?
第一次尝试
我的第一个也是更简单的解决方案是将类span8放在井元素中(JSFiddle):
<div class="row"> <div class="span8 well well-large"> <h3>Place an Order</h3> <div class="row"> <div class="span3">Bid Price</div> <div class="span2">Execute</div> <div class="span3">Ask Price</div> </div> </div> </div>
这解决了以前的问题,但添加了一个问题.由于填充现在位于span8元素中,因此主网格被破坏,因为井元素的宽度为670px(宽度为620px,您必须从填充和边界添加50px).
但现在蓝色部分的宽度为620px,因此嵌套行的所有元素都可以完美地适合蓝色部分.但正如我之前所说,电网坏了.例如,如果在span8之后添加span4元素,则span4将被推送到下一行,就像之前使用嵌套元素一样.
所以有了这个布局(JSFiddle):
<div class="row"> <div class="span8 well well-large"> <!-- Some ramdom text --> </div> <div class="span4"> <!-- Some ramdom text --> </div> </div>
你有这个结果:
最终解决方案
如果您想在井内有3个柱,则需要使用不同的网格系统.一种解决方案可以是使用行液而不是行.对于行液,跨度元素的宽度是百分比,而不是固定宽度.
有了这个布局(JSFiddle):
<div class="row"> <div class="span8"> <div class="well well-large"> <h3>Place an Order</h3> <div class="row-fluid"> <div class="span4">Bid Price</div> <div class="span4">Execute</div> <div class="span4">Ask Price</div> </div> </div> </div> </div>
你可以实现类似于你想要的东西.如果你想要3/8,2 / 8和3/8的精确比例(就像你的初始设置有跨度),你必须使用CSS来制作三列布局,你不能只使用bootstrap span元素.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。