Bootstrap 列表组滚动

9nvpjoqh 于 2023-03-21 发布在 Bootstrap

关注(0)|答案(2)|浏览(168)

<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看起来像这样。2我期望列表中有很多项。3而且大多数时候它会超出我的窗口，

我试着这样设置我的CSS：

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

但没用有什么办法吗

twitter-bootstrap

来源：https://stackoverflow.com/questions/47256185/bootstrap-list-group-scroll

2条答案

按热度按时间

dxpyg8gm1#

尝试添加max-height:

.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>

赞(0）回复(0）举报 2023-03-21

kx7yvsdv2#

只有使用BS，你才能做到！类overflow-auto+简短的HTML样式属性信息。
我已经在Bootstrap〉= 4.6.x上进行了测试
请看下面的例子：

<div class="list-group overflow-auto shadow" style="max-height: 100px;">
   <li id="item1">Item 1</li>
   <li id="item2">Item 2</li>
   <li id="item3">Item 3</li>
   <li id="item4">Item 4</li>
   <li id="item5">Item 5</li>
   <li id="item6">Item 6</li>
   <li id="item7">Item 7</li>
   <li id="item8">Item 8</li>
   <li id="item9">Item 9</li>
   <li id="item10">Item 10</li>
   <li id="item11">Item 11</li>
   <li id="item12">Item 12</li>
   <li id="item13">Item 13</li>
   <li id="item14">Item 14</li>
   <li id="item15">Item 15</li>
 </div>

赞(0）回复(0）举报 2023-03-21

我来回答

Bootstrap 列表组滚动

2条答案

相关问题

热门标签

最新问答