bootstrap - 保持div固定在水平滚动滚动

Question

我在div的底部有一些控件。我希望这些控件在用户滚动时保持固定。

我试过了： 1）使div固定。问题是id会破坏我的引导属性，也会因为动态生成高度。

   <div id="timelineContainer">
  <p class="mes">{{mes1}}</p>
  <div id='chart_div' class="chart"></div>

  <div class="row fixedcontrols">

    <div class="fixed col-md-1 col-lg-1 col-xs-1 form-group-lg">
      <button type="button" id="next1" class="btn btn-primary btn-block transback " ng-click="timeline.getPreviousData();"class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Load previous 100 records...">
        <span id="nextdata1" class="glyphicon glyphicon-arrow-left"></span></button>
    </div>

    <div class="col-md-3 col-lg-3 col-xs-3 ">
      <button type="button" class="btn btn-warning btn-block" class="tt" id="btn_ZoomIn" name="btn_ZoomIn" ng-click="timeline.zoomIn()"><span id="zoomin" class="glyphicon glyphicon-zoom-in"></span>
      </button>
    </div>

  <div class="col-md-3 col-lg-3 col-xs-3  form-group-lg">
  <button type="button" class="btn btn-primary btn-block" id="btn_ZoomOut" name ="btn_ZoomOut" ng-click="timeline.zoomOut()"> <span id="zoomout" class="glyphicon glyphicon-zoom-out"></span></button>
</div>

  <div class="col-md-4 col-lg-4 col-xs-4 col-sm-4 form-group-md ff">
    <button type="button" id="advanced1" ng-click="timeline.searchclick()" class="btn btn-default btn-block">Show Search</button>
  </div>
  <div class="col-md-1 col-lg-1 col-xs-1 form-group-lg pull-right">
    <button type="button" id="next" class="btn btn-primary btn-block " ng-click="timeline.getNextData();"class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Load next 100 records..."> <span id="nextdata" class="glyphicon glyphicon-arrow-right"></span>
    </button>
  </div>

  </div>
</div>



 #timelineContainer {

 overflow-x: scroll;
 overflow-y: scroll;
 white-space: nowrap;  border: 13px solid #bed5cd;
 width: 100%;
 margin: 0 auto;
 position: relative;
 background-color:  #5bc0de;
  }

谢谢。

更新： 当用户滚动时，控件移动，如下所示。我希望它们得到修复。

更新：说图片

Answer 1

我可以从您的问题中理解，您希望页面下方的div固定在位，

我希望css的一个小改动能解决你的问题

position: fixed !important;

如果它不是你的意思，那么请你解释一下!!

Answer 2

将控件的位置设置为绝对值，并确保他们的祖先是id为id timelineContainer的div。绝对将相对于其祖先定位元素。无论你搬到哪里，他们都会被固定在div。