将col-md-4浮动到col-md-8滚动

时间：2016-12-20 20:13:40

标签： css twitter-bootstrap angular-ui-bootstrap

假设我有这样一行：

<div class="row">
   <div class="col-md-4">
       stuff
   </div>
   <div class="col-md-8">
       stuff
   </div>
</div>

当您向下滚动第二个网格（col-md-4）时，如何获取第一个网格（col-md-8）？

我是否使用行或是否需要将网格更改为容器？

---- ---- EDIT

尝试使用data-spy="affix"如下所示，但仍无法使其正常工作...完整代码：

<div class="row">

        <div class="col-md-2" style="border:1pt solid black" data-spy="affix">
            <br><br><br><br>
            <div class="row">
                <h4>Select Time Series:</h4>
                <div class="btn-group-vertical" data-toggle="buttons">
                    <label class="btn btn-primary">
                        <input type="radio" name="timeoptions" id="yr" autocomplete="off" checked value="yr" ng-model="yAxistm" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Yearly
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" name="timeoptions" id="qtr" autocomplete="off" value="qtr" ng-model="yAxistm" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Quarterly
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" name="timeoptions" id="mth" autocomplete="off" value="mth" ng-model="yAxistm" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Monthly
                    </label>
                </div>
            </div>
            <br>
            <div class="row" style="border:1pt solid black">                
                <h4>Select Chart Type:</h4>
                <div class="btn-group-vertical" data-toggle="buttons">
                    <label class="btn btn-primary">
                        <input type="radio" name="chartoptions" id="multiBarChart" autocomplete="off" checked value="multiBarChart" ng-model="chrtTyp" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Bar Chart
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" name="chartoptions" id="lineChart" autocomplete="off" value="lineChart" ng-model="chrtTyp" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Line Chart
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" name="chartoptions" id="stackedAreaChart" autocomplete="off" value="stackedAreaChart" ng-model="chrtTyp" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Stacked Area Chart
                    </label>
                </div>
            </div>
            <br>
            <div class = "row">
                <button uib-tooltip="Export data to CSV" class="btn btn-default btn-sm" ng-csv="export_data" csv-header="['SCENARIO_ID', 'SCENARIO_DESC', 'SCENARIO_STATUS', 'SCN_APPL_LOB_OWNR_NM', 
                   'SCN_APPL_SUB_LOB_OWNR_NM', 'SCENARIO_ASV_ID', 
                   'APPL_CI_ID', 'APPL_CI_NM', 'APPL_CI_COMM_NM', 'APPL_LOB_OWNR_NM', 'APPL_SUB_LOB_OWNR_NM', 
                   'COST', 'AGG_COMPLEXITY', 'SRVC_LVL', 'DC_LOC', 'START_DT', 'END_DT', 
                   'DECOMM_DT', 'ASV_TARGET_ID', 'ASV_TARGET_DESC', 'ASV_TARGET_MASTER', 'TYPE', 'DT',  
                   'MTH_DT', 'ENV_STAT', 'ENV', 'COST_CURR', 'QTY_CURR','COST_TRGT', 'QTY_TRGT', 'FTPRNT']" filename="report_data.csv"><span class="glyphicon glyphicon-download"> </span> Export Data to CSV
                </button>
            </div>
        </div>

        <div class="col-md-10">
        <treasure-overlay-spinner active='spinner.active'>
            <h1 align="center">Scenario Reporting</h1>
            <div class="row">
                <div class="col-md-5 col-md-offset-1">
                    <div class="report-tile">
                        <nvd3 options="options_scn_lvl_cnt" data="data_LvlCntByScn"></nvd3>

                    </div>
                </div>
                <div class="col-md-5">
                    <div class="report-tile">
                        <nvd3 options="options_scn_lvl_cst" data="data_LvlCstByScn"></nvd3>

                    </div>
                </div>
            </div>
            <h1 align="center">Scenario Specific Reporting</h1>
            <div class="row">
                <div class="col-md-5 col-md-offset-1">
                    <div class="report-tile" ng-repeat="data in data_cntByScn">
                                    <h3>Scenario {{ data.key }} Total ASV Count</h3>
                        <nvd3 options="options_scn_cnt_compare" data="data.values"></nvd3>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="report-tile" ng-repeat="data in data_costByScn">
                                    <h3>Scenario {{ data.key }} Total Cost</h3>
                        <nvd3 options="options_scn_cst_compare" data="data.values"></nvd3>

                    </div>
                </div>
            </div>
        </treasure-overlay-spinner>
        </div>

</div>

----编辑2 ---------

尝试使用macgyver库但由于某种原因，当我滚动并重叠第一列时，我的第二列col-md-10向左移动... 

<div class="row">

        <div class="col-md-2" style="border:1pt solid black" mac-affix >
            <br><br><br><br>
            <div mac-affix>
            <div class="row">
                <h4>Select Time Series:</h4>
                <div class="btn-group-vertical" data-toggle="buttons">
                    <label class="btn btn-primary">
                        <input type="radio" name="timeoptions" id="yr" autocomplete="off" checked value="yr" ng-model="yAxistm" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Yearly
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" name="timeoptions" id="qtr" autocomplete="off" value="qtr" ng-model="yAxistm" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Quarterly
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" name="timeoptions" id="mth" autocomplete="off" value="mth" ng-model="yAxistm" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Monthly
                    </label>
                </div>
            </div>
            <br>
            <div class="row" style="border:1pt solid black">                
                <h4>Select Chart Type:</h4>
                <div class="btn-group-vertical" data-toggle="buttons">
                    <label class="btn btn-primary">
                        <input type="radio" name="chartoptions" id="multiBarChart" autocomplete="off" checked value="multiBarChart" ng-model="chrtTyp" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Bar Chart
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" name="chartoptions" id="lineChart" autocomplete="off" value="lineChart" ng-model="chrtTyp" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Line Chart
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" name="chartoptions" id="stackedAreaChart" autocomplete="off" value="stackedAreaChart" ng-model="chrtTyp" ng-model-options="{timezone: '-0500', updateOn: 'default blur', debounce: { 'default': 1, 'blur': 0 }, allowInvalid: false}">Stacked Area Chart
                    </label>
                </div>
            </div>
            <br>
            <div class = "row">
                <button uib-tooltip="Export data to CSV" class="btn btn-default btn-sm" ng-csv="export_data" csv-header="['SCENARIO_ID', 'SCENARIO_DESC', 'SCENARIO_STATUS', 'SCN_APPL_LOB_OWNR_NM', 
                   'SCN_APPL_SUB_LOB_OWNR_NM', 'SCENARIO_ASV_ID', 
                   'APPL_CI_ID', 'APPL_CI_NM', 'APPL_CI_COMM_NM', 'APPL_LOB_OWNR_NM', 'APPL_SUB_LOB_OWNR_NM', 
                   'COST', 'AGG_COMPLEXITY', 'SRVC_LVL', 'DC_LOC', 'START_DT', 'END_DT', 
                   'DECOMM_DT', 'ASV_TARGET_ID', 'ASV_TARGET_DESC', 'ASV_TARGET_MASTER', 'TYPE', 'DT',  
                   'MTH_DT', 'ENV_STAT', 'ENV', 'COST_CURR', 'QTY_CURR','COST_TRGT', 'QTY_TRGT', 'FTPRNT']" filename="report_data.csv"><span class="glyphicon glyphicon-download"> </span> Export Data to CSV
                </button>
            </div>
            </div>
        </div>

        <div class="col-md-10">
        <treasure-overlay-spinner active='spinner.active'>
            <h1 align="center">Scenario Reporting</h1>
            <div class="row">
                <div class="col-md-5 col-md-offset-1">
                    <div class="report-tile">
                        <nvd3 options="options_scn_lvl_cnt" data="data_LvlCntByScn"></nvd3>

                    </div>
                </div>
                <div class="col-md-5">
                    <div class="report-tile">
                        <nvd3 options="options_scn_lvl_cst" data="data_LvlCstByScn"></nvd3>

                    </div>
                </div>
            </div>
            <h1 align="center">Scenario Specific Reporting</h1>
            <div class="row">
                <div class="col-md-5 col-md-offset-1">
                    <div class="report-tile" ng-repeat="data in data_cntByScn">
                                    <h3>Scenario {{ data.key }} Total ASV Count</h3>
                        <nvd3 options="options_scn_cnt_compare" data="data.values"></nvd3>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="report-tile" ng-repeat="data in data_costByScn">
                                    <h3>Scenario {{ data.key }} Total Cost</h3>
                        <nvd3 options="options_scn_cst_compare" data="data.values"></nvd3>

                    </div>
                </div>
            </div>
        </treasure-overlay-spinner>
        </div>

</div>

1 个答案:

答案 0 :(得分：1)

你在寻找Affix吗？你需要使用：

data-spy="affix"

在具有粘滞效果的元素上。请在整个屏幕上查看该代码段。

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis exercitationem quis eos laboriosam esse eum iste vero in dolorum cumque, necessitatibus dignissimos est corrupti obcaecati assumenda quae modi ad culpa.</p>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div data-spy="affix" data-offset-top="50">
        stuff
      </div>
    </div>
    <div class="col-md-8 col-md-offset-4">
      stuff that goes too long.
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
    </div>
  </div>
</div>

相关问题
最新问题