fixed width column with fluid row container by bootstrap grid system

0readme.md

This gist is deprecated, please use display: table instead

index.html

<ul class="ir-msg-list ...">

  <li class="grid-list-header row-cw row-cw-msg-list ...">
    <div class="col-md-1 col-cw col-cw-name">
    <div class="col-md-1 col-cw col-cw-keyword">
    <div class="col-md-1 col-cw col-cw-reply">
    <div class="col-md-1 col-cw col-cw-action">
  </li>

  <li class="grid-list-item row-cw row-cw-msg-list ...">
    <div class="col-md-1 col-cw col-cw-name">
    <div class="col-md-1 col-cw col-cw-keyword">
    <div class="col-md-1 col-cw col-cw-reply">
    <div class="col-md-1 col-cw col-cw-action">
  </li>
</ul>

style.scss

    .row-cw {
      position: relative;
    }

    .col-cw {
      position: absolute;
      top: 0;
    }


    .ir-msg-list {

      $col-reply-width: 140px;
      $col-action-width: 130px;

      .row-cw-msg-list {
        padding-right: $col-reply-width + $col-action-width;
      }

      .col-cw-name {
        width: 50%;
      }

      .col-cw-keyword {
        width: 50%;
      }

      .col-cw-reply {
        width: $col-reply-width;
        right: $col-action-width;
      }

      .col-cw-action {
        width: $col-action-width;
        right: 0;
      }
    }