Offset Margin-Left Percentages for Fluid Row in Bootstrap

Question

Up to and including Twitter Bootstrap v2.0.4, there have been no CSS margin-left percentages when using the offset class in a row-fluid scenario. I have looked on SO and other sites for an answer but cannot find one.

Does anyone have this information that I can add to my bootstrap-responsive.css file?

Thanks,

Chris

Answer 1

You may also need the original offset. It's better to add another code for offset to left.

I added a new class named offsetright and added this code to bootstrap.css:

.row-fluid .offsetright12 {
  margin-right: 104.25531914893617%;
  *margin-right: 104.14893617021275%;
}

.row-fluid .offsetright12:last-child {
  margin-right: 102.12765957446808%;
  *margin-right: 102.02127659574467%;
}

.row-fluid .offsetright11 {
  margin-right: 95.74468085106382%;
  *margin-right: 95.6382978723404%;
}

.row-fluid .offsetright11:last-child {
  margin-right: 93.61702127659574%;
  *margin-right: 93.51063829787232%;
}

.row-fluid .offsetright10 {
  margin-right: 87.23404255319149%;
  *margin-right: 87.12765957446807%;
}

.row-fluid .offsetright10:last-child {
  margin-right: 85.1063829787234%;
  *margin-right: 84.99999999999999%;
}

.row-fluid .offsetright9 {
  margin-right: 78.72340425531914%;
  *margin-right: 78.61702127659572%;
}

.row-fluid .offsetright9:last-child {
  margin-right: 76.59574468085106%;
  *margin-right: 76.48936170212764%;
}

.row-fluid .offsetright8 {
  margin-right: 70.2127659574468%;
  *margin-right: 70.10638297872339%;
}

.row-fluid .offsetright8:last-child {
  margin-right: 68.08510638297872%;
  *margin-right: 67.9787234042553%;
}

.row-fluid .offsetright7 {
  margin-right: 61.70212765957446%;
  *margin-right: 61.59574468085106%;
}

.row-fluid .offset7right:last-child {
  margin-right: 59.574468085106375%;
  *margin-right: 59.46808510638297%;
}

.row-fluid .offsetright6 {
  margin-right: 53.191489361702125%;
  *margin-right: 53.085106382978715%;
}

.row-fluid .offsetright6:last-child {
  margin-right: 51.063829787234035%;
  *margin-right: 50.95744680851063%;
}

.row-fluid .offsetright5 {
  margin-right: 44.68085106382979%;
  *margin-right: 44.57446808510638%;
}

.row-fluid .offsetright5:last-child {
  margin-right: 42.5531914893617%;
  *margin-right: 42.4468085106383%;
}

.row-fluid .offsetright4 {
  margin-right: 36.170212765957444%;
  *margin-right: 36.06382978723405%;
}

.row-fluid .offsetright4:last-child {
  margin-right: 34.04255319148936%;
  *margin-right: 33.93617021276596%;
}

.row-fluid .offsetright3 {
  margin-right: 27.659574468085104%;
  *margin-right: 27.5531914893617%;
}

.row-fluid .offsetright3:last-child {
  margin-right: 25.53191489361702%;
  *margin-right: 25.425531914893618%;
}

.row-fluid .offsetright2 {
  margin-right: 19.148936170212764%;
  *margin-right: 19.04255319148936%;
}

.row-fluid .offsetright2:last-child {
  margin-right: 17.02127659574468%;
  *margin-right: 16.914893617021278%;
}

.row-fluid .offsetright1 {
  margin-right: 10.638297872340425%;
  *margin-right: 10.53191489361702%;
}

.row-fluid .offsetright1:last-child {
  margin-right: 8.51063829787234%;
  *margin-right: 8.404255319148938%;
}

Do the same for bootstrap-responsive.css:

.row-fluid .offsetright12 {
    margin-right: 105.12820512820512%;
    *margin-lerightft: 105.02182214948171%;
  }
  .row-fluid .offsetright12:last-child {
    margin-right: 102.56410256410257%;
    *margin-right: 102.45771958537915%;
  }
  .row-fluid .offsetright11 {
    margin-right: 96.58119658119658%;
    *margin-right: 96.47481360247316%;
  }
  .row-fluid .offsetright11:last-child {
    margin-right: 94.01709401709402%;
    *margin-right: 93.91071103837061%;
  }
  .row-fluid .offsetright10 {
    margin-right: 88.03418803418803%;
    *margin-right: 87.92780505546462%;
  }
  .row-fluid .offsetright10:last-child {
    margin-right: 85.47008547008548%;
    *margin-right: 85.36370249136206%;
  }
  .row-fluid .offsetright9 {
    margin-right: 79.48717948717949%;
    *margin-right: 79.38079650845607%;
  }
  .row-fluid .offsetright9:last-child {
    margin-right: 76.92307692307693%;
    *margin-right: 76.81669394435352%;
  }
  .row-fluid .offsetright8 {
    margin-right: 70.94017094017094%;
    *margin-right: 70.83378796144753%;
  }
  .row-fluid .offsetright8:last-child {
    margin-right: 68.37606837606839%;
    *margin-right: 68.26968539734497%;
  }
  .row-fluid .offsetright7 {
    margin-right: 62.393162393162385%;
    *margin-right: 62.28677941443899%;
  }
  .row-fluid .offsetright7:last-child {
    margin-right: 59.82905982905982%;
    *margin-right: 59.72267685033642%;
  }
  .row-fluid .offsetright6 {
    margin-right: 53.84615384615384%;
    *margin-right: 53.739770867430444%;
  }
  .row-fluid .offsetright6:last-child {
    margin-right: 51.28205128205128%;
    *margin-right: 51.175668303327875%;
  }
  .row-fluid .offsetright5 {
    margin-right: 45.299145299145295%;
    *margin-right: 45.1927623204219%;
  }
  .row-fluid .offsetright5:last-child {
    margin-right: 42.73504273504273%;
    *margin-right: 42.62865975631933%;
  }
  .row-fluid .offsetright4 {
    margin-right: 36.75213675213675%;
    *margin-right: 36.645753773413354%;
  }
  .row-fluid .offsetright4:last-child {
    margin-right: 34.18803418803419%;
    *margin-right: 34.081651209310785%;
  }
  .row-fluid .offsetright3 {
    margin-right: 28.205128205128204%;
    *margin-right: 28.0987452264048%;
  }
  .row-fluid .offsetright3:last-child {
    margin-right: 25.641025641025642%;
    *margin-right: 25.53464266230224%;
  }
  .row-fluid .offsetright2 {
    margin-right: 19.65811965811966%;
    *margin-right: 19.551736679396257%;
  }
  .row-fluid .offsetright2:last-child {
    margin-right: 17.094017094017094%;
    *margin-right: 16.98763411529369%;
  }
  .row-fluid .offsetright1 {
    margin-right: 11.11111111111111%;
    *margin-right: 11.004728132387708%;
  }
  .row-fluid .offsetright1:last-child {
    margin-right: 8.547008547008547%;
    *margin-right: 8.440625568285142%;
  }