col属性を破棄せずに行の位置を固定する方法を教えてください。

Question

私は何をしようとしているかを示すフィドルです。私は、行要素内のdivを追加し、それが位置することがどちらか

1. すると、行が固定された位置であることを確認する

   ：固定は、div要素を追加COLのサイジングに

2. を破壊します行要素の外側は上記と同じです。

この問題を修正するにはどうすればよいですか？私はSASSを使用しますが、私はあなたがそれを翻訳することができます確信している

https://jsfiddle.net/DTcHh/22904/

<div class="row"> 

     <div class="col-md-2"> 
      <h4 id="currentlyTagging">Currently tagging:</h4> 
      </div> 
      <div class="col-md-3"> 
      <select id="tagSelection" ng-model="myModel" data-style="btn-primary" required class="list-selector form-control" 
      ng-options="tag.name for tag in v.tagListFromDatabase" ng-change="v.select(myModel.name)"> 
       <option value='' disabled>Select a label</option> 
      </select> 
      </div> 
      <div class="col-md-3"></div> 
      <div class="col-md-4" > 
       <span title="Save changes"class="glyphicon glyphicon-floppy-disk" id="done-button" ng-click="v.done()"></span> 
       <span title="Cancel and return to images" class="glyphicon glyphicon-remove-circle" id="cancel-button" ui-sref='imageListState'></span> 
       <span title="Delete Image" class="glyphicon glyphicon-trash" id="delete-button" ng-click="v.openDeleteModal()"></span> 
      </div> 


    </div> 

    <div class="col-md-12" id="imageControlBar"> 
     <span class="glyphicon glyphicon-arrow-right" id="next-button" ng-click="v.next()"></span> 
    </div> 
    </div> 

Answer 1

。

HTML

<header> 
     <div id="header-content"></div> 
    </header> 

SASS/CSS

header{ 
    @extend .row; 
    position:absolute; 
} 

#header-content{ 
    @include make-sm-column(3); 
    position:fixed; 
} 

私は今まだグリッドの一部であり、まだ正確なサイズ固定列を持っています。

編集： Thanks for the downvote？文字通りSCSSの@extendと@includeをHTMLのクラスに置き換えることです。