css – Bootstrap响应行流体问题

2019年8月4日 208次阅读

我有一个流畅的行,我需要显示和隐藏跨度,具体取决于用户想要查看页面的方式(单视图,拆分视图).使用jQuery,我显示/隐藏跨度以及更改其类：

MySpan1查看：

<div class="row-fluid">
    <div id="myspan1" class="span12"></div>
    <div id="myspan2" style="display:none;"></div>
</div>

MySpan2 View(这个没有正确布局)：

<div class="row-fluid">
    <div id="myspan1" style="display:none;"></div>
    <div id="myspan2" class="span12"></div>
</div>

拆分视图：

<div class="row-fluid">
    <div id="myspan1" class="span6"></div>
    <div id="myspan2" class="span6"></div>
</div>

我遇到以下响应式样式表规则的问题：

.row-fluid [class*="span"]:first-child
{
    margin-left: 0;
}

此规则仅删除span类的左边距,如果它们是父类的第一个子节点.好吧,在MySpan2视图的情况下,我的div是父节点的第二个子节点(即使它是第一个带有span *类的子节点.因此,左边距仍在应用.是​​否有一个css伪选择器我会做我期待的事情吗？我想只选择匹配集的第一个元素,而不是它是否是父母的第一个子元素.我可以使用jQuery和一些额外的css来解决这个问题,但我希望能一个更全球化的决议.

最佳答案 更新的答案

看看这个解决方案是否适合您：

http://jsfiddle.net/panchroma/R7zf6/

它很干净,我认为很容易融入您已经完成的工作中.

重要的是：

>为行内流体中的每个跨度添加.marker类
>当你想隐藏div时,使用jQuery将类从标记更改为隐藏. Hide是默认的Bootstrap类,与您使用的内联styes相同.通过这种方式,只需更改类名,即可在不同视图之间轻松切换回第四个

而已 ：)

其余的使用CSS完成：

/* by default, remove left-hand margin on all spans of class .marker */

.row-fluid > [class*="span"].marker{  
margin-left:0;
}


/* restore default left hand margin on all but the first span of class .marker */

.row-fluid > [class*="span"].marker ~ [class*="span"].marker{
margin-left: 2.127659574468085%;
}

jsfiddle具有更多细节和调整,以允许在不同视口处的不同左边距宽度.

有关CSS除了第一个类.marker之外的所有内容的完整解释,请参阅@BoltClock here的帖子

希望这可以帮助

点赞