是否有任何CSS hack来阻止下拉菜单导致溢出?

Question

我的问题:https://i.gyazo.com/152caf74df3c484e770f9e8c34f5471e.mp4

如果我点击按钮，那么它会导致溢出。我希望菜单显示时没有溢出

沙箱: https://stackblitz.com/edit/react-ts-8aq1rq?file=App.tsx index . html

代码:

import * as React from 'react';
import './style.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { NavDropdown, Button } from 'react-bootstrap';
// @ts-nocheck
export default function App() {
return (
<div className="table-responsive">
<div className="table">
<table
id="user-list-table"
className="table table-striped"
role="grid"
data-toggle="data-table"
>
<thead>
<tr className="light">
<th>Col one</th>
<th>Col two</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>
<NavDropdown
id="basic-nav-dropdown"
title={
<Button className="btn btn-sm btn-icon" variant="primary">
click
</Button>
}
>
<NavDropdown.Item>Option 1</NavDropdown.Item>
<NavDropdown.Item>Option 2</NavDropdown.Item>
<NavDropdown.Item>Option 3</NavDropdown.Item>
</NavDropdown>
</td>
</tr>
</tbody>
</table>
</div>
</div>
);
}

是否有另一个引导组件，这样我就可以交换NavDropdown到它?如果没有，有没有其他东西，比如CSS hack，让我做到这一点?

Answer 1

问题是没有足够的空间下拉导航列表与table-responsive类的div内。你可以给它一些最小高度或内边距，但如果你在它下面有内容，那可能会很奇怪。因此，您可以添加负边距来抵消额外的填充:

.table-responsive {
padding-bottom: 100px;
margin-bottom: -100px;
}

演示