Question

我有一个流畅的行，我需要显示和隐藏跨度，具体取决于用户想要查看页面的方式（单视图，拆分视图）。使用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来解决这个问题，但我希望能更全面的决议。

Answer 1

更新了答案

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

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

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

重要的一点是：

为行内流体
如果要隐藏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的帖子

希望这有帮助

Bootstrap响应行流体问题

1 个答案: