文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用col md-8滚动，让col md-4浮动

问使用col md-8滚动，让col md-4浮动
EN

Stack Overflow用户
提问于 2016-12-21 04:13:40
回答 0查看 119关注 0票数 2

假设我有一个这样的行：

代码语言：javascript
复制
<div class="row">
   <div class="col-md-4">
       stuff
   </div>
   <div class="col-md-8">
       stuff
   </div>
</div>

如何在向下滚动第二个网格(col-md-8)时获得第一个网格(col-md-4)？

我是使用row还是需要将网格更改为容器？

--编辑

尝试使用如下所示的data-spy="affix"，但仍然无法将其用于work...full代码：

代码语言：javascript
复制
<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会向左移动，然后...

代码语言：javascript
复制
<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>
css
twitter-bootstrap
angular-ui-bootstrap
EN

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/41250545

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档