我的問題： 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 可以讓我這樣做？
uj5u.com熱心網友回復：
問題是沒有足夠的空間來下拉 div 內的導航串列，其類為table-responsive. 你可以給它一些最小高度或填充，但如果你在它下面有內容，那可能會很奇怪。因此，您可以添加負邊距來抵消額外的填充：
.table-responsive {
padding-bottom: 100px;
margin-bottom: -100px;
}
演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/530267.html
標籤：css反应
上一篇：使用Javascript洗掉所有css樣式而不洗掉類
下一篇：如何設計HTMLCSS影像？