Question

我的Bootstrap中的网格系统有问题。我有以下结构：

<div class="container content">
    <div class="row">
        <div class="col-md-2 side-nav">
        </div>
        <div class="col-md-8 matchview">
        </div>
        <div class="col-md-2 ">
             TEST
        </div>
  </div>

包含单词TEST的最后一部分显示在右侧导航的顶部。右侧导航有一个固定的位置，任何人都知道为什么会发生这种情况以及解决这个问题的原因？

.matchview{
position: fixed;
left: 200px;
height: calc(100% - 100px);
overflow-y: scroll;

}

.side-nav{
position: absolute;
width: 200px;
overflow-y: scroll;
top: 105px;
bottom: 0;
padding: 0;
text-align: center;
opacity: 77%;
color: #485563 !important;

}

matchview的左边距为200px;与side-nav不冲突。它有点混乱，也不适合响应性。我之所以固定侧导航的位置的原因是因为有一个105px的顶部标题，如果我改变定位，我会丢失滚动标题。

Answer 1

具有固定位置的元素显示在屏幕上的固定位置。这不会影响您网站其余部分的流量，并且根据您的z索引，它们可以覆盖其他元素或覆盖。您将需要保留固定侧导航所需的空间，否则静态元素将移动到其后面或前面。

Answer 2

在row中，12每个columns分为2+8+2 TEST。您可以将这12列分成任意组合。在您的代码中，您已将<div class="container content"> <div class="row"> <div class="col-md-2 side-nav" style="background: red;"> DIV COL-MD-2 </div> <div class="col-md-8 matchview" style="background: orange;"> DIV COL-MD-8 </div> <div class="col-md-2 " style="background: green;"> TEST </div> </div>组合分开。在最后两列中，您编写了private List<string> setList(List<string> a, int count) { List < string > retr; if(a.Capacity == 0) { retr = new List<string>(); for(int counter = 0; counter < count; counter++) { retr.Add(string.empty); } } else { retr = a; } return retr; }。如果你给出颜色，那么你就会清楚。

var getResults = function() {

    // fetch data
    return reportService.getReportResults( {
            report: $scope.id,
            version: $scope.version
        } )
        .then( function( data ) {

            // assign the values
            $scope.data = data.results

            // notify angular to recheck his array
            $scope.$digest()

            // consider using a functional approach to have a cleaner code
            _( $scope.data )
                .first()
                .keys()
                .filter( key => ( key !== 'id' && key !== 'email' ) )
                .each( key => {
                    $scope.columns.push( {
                        title: _str.capitalize( key ),
                        field: key,
                        visible: true,
                        required: false
                    } )
                } )
                .value()

            return $scope.data
        } )
}

列显示在其他列Bootstrap的顶部

2 个答案: