Question

我使用bootstrap2.3.1获得了这样的视图：

<div class="row-fluid">
    <div class="span3">text1</div>
    <div class="span3">text2</div>
    <div class="span3">text3</div>
    <div class="span3">text4</div>
</div>

当我过滤它以仅显示带有text2的div时，我将其他div显示为none。但是因为带有text1的div仍然是第一个孩子，带有text2的div具有左边距。我如何改变它，所以它只留下margin-left：0;到第一个带显示屏的孩子？

过滤时，视图看起来像这样：

<div class="row-fluid">
    <div class="span3" style="display: none;">text1</div>
    <div class="span3">text2</div>
    <div class="span3" style="display: none;">text3</div>
    <div class="span3" style="display: none;">text4</div>
</div>

通过以下CSS从bootstrap中删除了第一个子节点：

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

我想我应该做这样的事情:(但不是正确的语法）

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

Answer 1

这是你的bizzare选择器（demo）：

.row-fluid [class^="span"]:not([style="display: none;"]) {
    margin-left: 0;
}

然而，目前无法选择第一类，因此此规则将应用于所有匹配的元素。我建议你在显示/隐藏元素时切换Bootstrap类（.spanX）。

过滤时，Bootstrap删除左边距

1 个答案: