How can I subdivide the first column in the Bootstrap 2 grid?

Question

I have something like this:

<div class="row-fluid">
    <div class="span1"> Nr </div>
    <div class="span11"> Text </div>
</div>

The problem is that the first column takes up 8.3% of the row width, but I only want it to take up 5% of the width - with the entire remaining portion of 95% being used for the second column.

How would you subdivide the first column and then add its remaining part to the second column?

Answer 1

@media(min-width: 768px) {
    .span1.five {
        width: 5%;
        background: pink;
        display: inline-block;
        text-align: center;
    }
    .span1.five + div {
        width: 92%; /* << could be refined to get closer to the page margin */
    }
}

Demo

You'd want to nest a row inside the span11 element to break it up further.

Demo 2