Consider the following markup with Boostrap 3:
<ol>
<li>
<div class="row">
<div class="col-xs-6">
Row 1, col 1
</div>
<div class="col-xs-6">
Row 1, col 2
</div>
</div>
</li>
</ol>
Why does the text not align with the "1." from the <ol>
? See http://jsfiddle.net/R2tXU/ as an example...
Also, would it be valid to put the class="row"
right on the <li>
?
Thanks!
Sorry, I'm a little late responding here... However, using valid markup is important and therefore I think it's worth mentioning alternative solutions...
Using a little HTML and CSS, you could set the value
on each li
([ Valid HTML5 ]):
HTML
<ol>
<li class="col-xs-6" value="1">Row 1, col 1</li>
<li class="col-xs-6">Row 1, col 2</li>
<li class="col-xs-6" value="2">Row 2, col 1</li>
<li class="col-xs-6">Row 2, col 2</li>
</ol>
CSS
ol li:nth-child(2n+0) {
list-style: none;
}
However, if you're going for a purely CSS approach, this is probably the best option...
[ JSFiddle Example ]
HTML
<ol>
<li class="col-xs-6">Row 1, col 1</li>
<li class="col-xs-6">Row 1, col 2</li>
<li class="col-xs-6">Row 2, col 1</li>
<li class="col-xs-6">Row 2, col 2</li>
</ol>
CSS
ol {
counter-reset: index;
}
ol li:nth-child(2n+0) {
counter-increment: index;
list-style: none;
}
ol li:nth-child(2n+0):before {
content: counter(index) ".";
}
ol li:nth-child(2n+0):before {
content: "";
}
However, do keep in mind [ browser compatibility ].
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments