Utilizing Bootstrap 2.3.1, I have designed a layout as follows:
<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>
When filtering to display only the div containing text2, I hide the other divs by setting their display property to none. However, because the div with text1 is still the first child, the div containing text2 inherits a left margin. How can I modify this so that it solely applies margin-left: 0; to the first child with display block?
The filtered view appears like this:
<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>
The first-child margin was eliminated by the following CSS from bootstrap:
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
I believe the correct approach should be something similar to this (albeit with the proper syntax):
.row-fluid [class*="span"]:first-child[display="block"] {
margin-left: 0;
}