Css 引导响应行流体问题

我有一个流畅的行，我需要根据用户希望查看页面的方式（单视图、拆分视图）显示和隐藏跨距。使用jQuery，我可以显示/隐藏跨距以及更改跨距的类：

MySpan1视图：

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

---

仅当跨度类是父类的第一个子类时，此规则才删除其左边距。在MySpan2视图中，我的div是父视图的第二个子视图（尽管它是第一个使用span*类的元素。因此，仍然应用了左边距。是否有css伪选择器可以实现我的期望？我只想选择匹配集的第一个元素，而不想选择它是否是父元素的第一个子元素。我可以使用jQuery和一些额外的css来修复此问题，但我没有这样做ping以获得更全面的解决方案。

更新的答案

查看此解决方案是否适合您：

它很干净，我认为很容易融入到你已经做过的事情中

重要的是：

• 向行中的每个跨距添加.marker类

• 如果要隐藏div，请使用jQuery将类从marker更改为hide。hide是一个默认引导类，它与您正在使用的内联样式具有相同的功能。通过这种方式，只需更改类名即可轻松地在不同视图之间切换回第四个视图

就这样：）

其余部分使用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%;
}

具有更多细节和调整，以允许在不同的视口中使用不同的左边距宽度

有关CSS如何选择class.marker的第一个跨距之外的所有跨距的完整解释，请参阅@BoltClock的帖子

---

希望这有帮助

当然，我也可以通过“.row fluid.span12{margin left:0；}”轻松地在全局范围内完成这项工作。这在这种情况下有效。不幸的是，有时我可能会有三个.span4 div，在这种情况下，我可能会隐藏第一个div，并将其他div转换为.span6。真正的全局解决方案是使用名为：first的css伪选择器（如jQuery中）这是不存在的。为了澄清，css确实有第一个选择器。挑战在于，当您使用display:none时，div不会显示，但它仍然存在于页面HTML中。您可以通过检查上面我的JSFIDLE中的页面源代码来验证这一点。不，css没有像jQuery的

：first

那样的选择器。它确实有

：first child

和

：第一种类型的

，但它们做的事情不同。请参阅我的答案

<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;
}

/* 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%;
}