4

I've got a fluid row in which I need to show and hide spans depending on how the user wants to see the page (single-view, split-view). Using jQuery, I show/hide spans as well as change their classes:

MySpan1 View:

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

MySpan2 View (this one doesn't layout correctly):

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

Split View:

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

I'm having a problem with the following responsive stylesheet rule:

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

This rule is only removing left-margin on span classes if they are the first child of the parent. Well, in the case of MySpan2 view, my div is the second child of the parent (even though it's the first one with a span* class. As a result, a left margin is still being applied. Is there a css pseudo selector that will do what I'm expecting? I want to select only the first element of the matching set, not whether or not it is the first child of the parent. I can fix this using jQuery and some additional css, but I was hoping for a more global resolution.

4

1 回答 1

2

更新的答案

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

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

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

重要的位是：

  • 为行流体内的每个跨度添加一个 .marker 类

  • 当你想隐藏一个 div 时，使用 jQuery 将类从 marker 更改为 hide 。Hide 是一个默认的 Bootstrap 类，它与您使用的内联样式相同。这样做可以很容易地通过简单地更改类名来在不同视图之间来回切换和第四次切换

而已 ：）

其余部分使用 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 的帖子

希望这可以帮助

于 2013-05-03T20:38:47.860 回答