Twitter bootstrap 如何细分Bootstrap 2网格中的第一列?
我有这样的想法:Twitter bootstrap 如何细分Bootstrap 2网格中的第一列?,twitter-bootstrap,twitter-bootstrap-2,Twitter Bootstrap,Twitter Bootstrap 2,我有这样的想法: <div class="row-fluid"> <div class="span1"> Nr </div> <div class="span11"> Text </div> </div> 天然橡胶 正文 问题是第一列占行宽度的8.3%,但我只希望它占行宽度的5%——其余95%的部分用于第二列 如何细分第一列,然后将其剩余部分添加到第二列?@media(最小宽度:768px){ @med
<div class="row-fluid">
<div class="span1"> Nr </div>
<div class="span11"> Text </div>
</div>
天然橡胶
正文
问题是第一列占行宽度的8.3%,但我只希望它占行宽度的5%——其余95%的部分用于第二列
如何细分第一列,然后将其剩余部分添加到第二列?@media(最小宽度:768px){
@media(min-width: 768px) {
.span1.five {
width: 5%;
background: pink;
display: inline-block;
text-align: center;
}
.span1.five + div {
width: 92%; /* << could be refined to get closer to the page margin */
}
}
.1.5{
宽度:5%;
背景:粉红色;
显示:内联块;
文本对齐:居中;
}
.span1.5+div{
宽度:92%;/*这是一个相当繁重的方法。你通常不想弄乱你的网格列。你可以右对齐第一列的内容以获得相同的结果吗?@isherwood。谢谢。是的,我可以这样做,但我尝试在打印输出中使用html-因此我需要使用更精细的度量。另一个问题是如果您使用更大的屏幕(+32英寸),然后在一个字段上浪费整个跨度看起来非常愚蠢。好吧,如果你使用的是容器,那么页面永远不会变宽。这可能是这样的。我使用span2
来更好地说明这项技术。是的,如果你像你一样使用最后一列,看起来没问题,但是在不浪费空间的情况下使用第一列看起来像是颠簸我还尝试了一个包含行流体的容器。在行流体中,我有一个表格,可以处理列宽的百分比。但是,如果您增加其左边距,行流体无法包含表格-导致表格延伸到页面之外。这些演示中的列不显示内联-或者我缺少了什么?是吗你看得够大了吗?我没有覆盖768px以下宽度的移动(全宽)样式,你可以看到。哦,我的错误是,必须将列拖得更宽。所以你基本上覆盖了引导宽度?看起来是最好的选择,因为它仍然是响应性的。很多thanx。