引导列表组滚动

Question

<div class="panel panel-primary" id="result_panel">
    <div class="panel-heading"><h3 class="panel-title">Result List</h3>
    </div>
    <div class="panel-body">
        <ul class="list-group">
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            # many li here..
            <li class="list-group-item"><strong>The Barrington At Park
                Place</strong>(15210m)
            </li>
            <li class="list-group-item"><strong>Camden Huntingdon
                Apartments</strong>(15820m)
            </li>
            <li class="list-group-item"><strong>Enclave at Water's Edge
                Apartments</strong>(15830m)
            </li>
        </ul>
    </div>
</div>

我的HTML看起来像这样。我希望列表中有很多项目。大多数时候它会超过我的窗口，

我试着像这样设置我的CSS：

.list-group{
    margin-bottom: 10px;
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
}

但它没有帮助，任何想法？

Answer 1

尝试添加 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="panel panel-primary" id="result_panel"> <div class="panel-heading"><h3 class="panel-title">Result List</h3> </div> <div class="panel-body"> <ul class="list-group"> <li class="list-group-item"><strong>Signature Accommodations</strong>(1480m) </li> <li class="list-group-item"><strong>Signature Accommodations</strong>(1480m) </li> <li class="list-group-item"><strong>Signature Accommodations</strong>(1480m) </li> <li class="list-group-item"><strong>Signature Accommodations</strong>(1480m) </li> <li class="list-group-item"><strong>Signature Accommodations</strong>(1480m) </li> <li class="list-group-item"><strong>Signature Accommodations</strong>(1480m) </li> <li class="list-group-item"><strong>Signature Accommodations</strong>(1480m) </li> <li class="list-group-item"><strong>Signature Accommodations</strong>(1480m) </li> <li class="list-group-item"><strong>Signature Accommodations</strong>(1480m) </li> <li class="list-group-item"><strong>Signature Accommodations</strong>(1480m) </li> <li class="list-group-item"><strong>Signature Accommodations</strong>(1480m) </li> <li class="list-group-item"><strong>Signature Accommodations</strong>(1480m) </li> <li class="list-group-item"><strong>Signature Accommodations</strong>(1480m) </li> <li class="list-group-item"><strong>Signature Accommodations</strong>(1480m) </li> </ul> </div> </div>

＆＃13;

＆＃13;

link

＆＃13;

sheet1.getRange(rowID, 14).setValue("=iferror(vlookup(M2,'sheet2'!C:O,13,false),\"\")");

＆＃13;

＆＃13;

＆＃13;

Answer 2

.list-group{
    max-height: 300px;
    margin-bottom: 10px;
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-primary" id="result_panel">
    <div class="panel-heading"><h3 class="panel-title">Result List</h3>
    </div>
    <div class="panel-body">
        <ul class="list-group">
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
        </ul>
    </div>
</div>