Question

这是一个小提琴，显示了我正在尝试做的事情。

我想确保该行是固定位置，但是要么

在行元素中添加div并使其位置：fixed destroys col sizings
在row元素外添加div与上面的相同。

我该如何解决这个问题？

 <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

我使用SASS但我确定你可以翻译它。

HTML

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

SASS / CSS

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

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

我现在有一个固定的列，它仍然是网格的一部分，但仍然可以正确调整大小。

编辑：谢谢你的downvote？它实际上是用HTML中的类替换SCSS中的@extend和@include。

如何在不破坏col-属性的情况下固定行位置？

1 个答案: