Bootstrap 4是流行的前端组件库的第四个主要版本。 Bootstrap框架有助于创建响应迅速，移动优先的网站和Web应用程序。
如何解决 Angular 项目中的 Tailwind 和 Bootstrap 冲突
我在同一个 Angular 项目中使用 Tailwind CSS 和 Bootstrap (ngx-bootstrap)。大多数情况下，他们相处得很好。然而，当涉及到内边距和边距时，他们就像兄弟姐妹一样战斗......
我希望我的卡片覆盖屏幕的宽度，但我的代码如下。 尝试过卡组，但没有帮助。 我希望我的卡片覆盖屏幕的宽度，但我的代码如下。 尝试过card-deck，但没有帮助。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"> </head> <body> <div class="container p-3 bg-white rounded"> <div class="row"> <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="row"> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">0-10</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">1-9</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">2-8</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">3-7</h5> <p class="card-text">00</p> </div> </div> </div> </div> </div> <div class="carousel-item "> <div class="row"> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">4-6</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">5-5</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">6-4</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">7-3</h5> <p class="card-text">00</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html> 在 div 块中将 col-lg-3 更改为 col-lg-auto，以便它在屏幕上占据相同的宽度 尝试使用 .card-columns 类，如下所示： <div class="card-columns"> <div id="card1" class="card"> <img class="card-img-top" src="" alt="Card image cap"> <div class="card-body"> <h5 class="card-title"> CARD 1 TITLE </h5> </div> <div class="card-body"> CARD 1 BODY </div> </div> <div id="card2" class="card"> <img class="card-img-top" src="" alt="Card image cap"> <div class="card-body"> <h5 class="card-title"> CARD 2 TITLE </h5> </div> <div class="card-body"> CARD 2 BODY </div> </div> </div> 并删除 row 和 col div，卡片列类负责剩下的
如何在 Bootstrap 轮播中启用每 10 秒自动滑动 2 个图像和一个视频？
我正在尝试创建一个图像和视频组合的滑块。 我尝试使用引导程序来实现，但是我失败了。 这是下面的代码 我正在尝试创建一个图像和视频组合的滑块。 我尝试使用引导程序来实现，但是我没有这样做。 下面是代码 <div id="carousel-slider" class="carousel slide carousel-fade" data-ride="carousel"> <!--Indicators--> <ol class="carousel-indicators"> <li data-target="#carousel-slider" data-slide-to="0" class="active"></li> <li data-target="#carousel-slider" data-slide-to="1"></li> <li data-target="#carousel-slider" data-slide-to="2"></li> </ol> <!--Indicators--> <!--Slides--> <div class="carousel-inner" role="listbox"> <!--First slide--> <div class="carousel-item active"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide"> </div> <!--/First slide--> <!--Second slide--> <div class="carousel-item"> <video src="./video/video1.mp4" autoplay poster="./images/boardwalk.jpg"></video> </div> <!--/Second slide--> <!--Third slide--> <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide"> </div> <!--/Third slide--> </div> </div> 我需要三张幻灯片，其中两张是图像幻灯片，一张是视频幻灯片，每 15 秒更改一次。 有没有办法使用jquery添加自定义幻灯片 只需将 data-interval 属性添加到引导轮播中，即可每隔 x 秒自动滚动到下一张幻灯片。请注意，data-interval在milliseconds中计算您的值，因此如果您想每10秒后更改轮播幻灯片，则需要添加data-interval=10000。 检查并运行以下代码片段，获取有关如何使用 data-interval 属性自动滑动轮播的实际示例： /* CSS */ html, body {margin: 0px; padding: 0px; width: 100%; height: 100%;} .wrapper { margin: 0 auto; width: 100%; } .carousel-item img {width: 100%; height: 200px;} .carousel-item video {width: 100%; height: 200px;} <!-- HTML --> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="wrapper"> <div id="carousel-slider" class="carousel slide carousel-fade" data-ride="carousel" data-interval="2000"> <!--Indicators--> <ol class="carousel-indicators"> <li data-target="#carousel-slider" data-slide-to="0" class="active"></li> <li data-target="#carousel-slider" data-slide-to="1"></li> <li data-target="#carousel-slider" data-slide-to="2"></li> </ol> <!--Indicators--> <!--Slides--> <div class="carousel-inner" role="listbox"> <!--First slide--> <div class="carousel-item active"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide"> </div> <!--/First slide--> <!--Second slide--> <div class="carousel-item"> <video controls> <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> </video> </div> <!--/Second slide--> <!--Third slide--> <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide"> </div> <!--/Third slide--> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> 我真的很喜欢 http://kenwheeler.github.io/slick/ 的 jquery 滑块。我认为这会对你有很大帮助。 我在下面为您制作了一个示例： //Initialize your slider in your script file $("#carousel-slider").slick({ arrows: false, infinite: true, slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 1500, mobileFirst: true }); <!-- HTML --> <head> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" /> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" /> </head> <div id="carousel-slider"> <div> <img style="width:100%; height:100%;" class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide"> </div> <div> <video style="width:100%; height:100%;" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" autoplay></video> </div> <div> <img style="width:100%; height:100%;" class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide"> </div> </div> <!-- Calling jQuery --> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <!-- Calling Slick Library --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script> 您可以将“autoplaySpeed”更改为您想要更改的任何间隔。 将 data-bs-ride="carousel" 放在包含 id="carousel-slider" 的 div 中，将 data-bs-interval="10000" 放在包含 class="carousel-item 的 div 中“
您好，您能帮我在代码中设置列吗？我有这个代码： 侧边菜单&l... 您好，您能帮我在代码中设置列吗？我有这个代码： <div class="container-fluid h-100"> <div class="row h-100"> <div class="flex-column h-100">side menu</div> <div class="???"> <div>1 piece</div> <div>2 pieces piece</div> <div>1 piece</div> <div/> <div/> <div/> 这是我的实际结果，其中我画出了如何分割其余空间。带菜单的蓝色栏应该固定，实际做什么。柱子比例1:2:1可调。 代替 row，您可以使用 d-flex 作为 row 罐 wrap - 内容可以放在侧边栏下方。 对于内容，如果你必须保留 html 结构，你可以使用这个： <div class="d-flex w-100"> <div class="col-3">1 piece</div> <div class="col-6">2 pieces piece</div> <div class="col-3">1 piece</div> </div> 请参阅下面的演示 - 添加边框以供说明： html,body { height: 100%; } div { border: 1px solid; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid h-100"> <div class="d-flex h-100"> <div class="flex-column h-100">side menu</div> <div class="d-flex w-100"> <div class="col-3">1 piece</div> <div class="col-6">2 pieces piece</div> <div class="col-3">1 piece</div> </div> </div> </div> 您可以通过 col 类使用以下解决方案： body { height:100vh; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid h-100"> <div class="row h-100"> <div class="flex-column h-100">side</div> <div class="col">1 piece</div> <div class="col-6">2 pieces piece</div> <div class="col">1 piece</div> </div> </div> 使用 w-* 类和 bootstrap flexbox 的另一种解决方案： body { height:100vh; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid h-100"> <div class="row h-100 d-flex flex-nowrap align-items-stretch"> <div class="flex-column h-100">side</div> <div class="w-25">1 piece</div> <div class="w-50">2 pieces piece</div> <div class="w-25">1 piece</div> </div> </div> 使用 Bootstrap v4 Flexbox： <div class="d-flex flex-row h-100"> <div class="d-flex justify-content-start">side menu</div> <div class="d-flex flex-row w-100"> <div class="w-25">1 piece</div> <div class="w-50">2 pieces piece</div> <div class="w-25">1 piece</div> </div> </div> 看来你可以在没有flex-column的情况下实现这一点。 列的比例由 flex-grow-1 类决定，具体取决于可用/需要的空间量。 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div style="height: 175px;"> <div class="d-flex flex-grow-1 border border-primary m-1 h-100"> <div class="d-flex flex-grow-1 border border-secondary m-1"> <div class="border border-success m-1"> <!-- seems to work even without flex-column :D --> <div class="border border-warning m-1">1 piece</div> <div class="border border-info m-1">1 piece</div> <div class="border border-dark m-1">1 piece</div> </div> <!-- with flex-wrap they will go under eachother if there is not enough space --> <div class="d-flex flex-wrap flex-grow-1 border border-danger m-1"> <div class="flex-grow-1 border border-warning m-1">1 piece</div> <div class="flex-grow-1 border border-info m-1">2 pieces piece</div> <div class="flex-grow-1 border border-dark m-1">1 piece</div> <div/> <div/> <div/> <div>
我在引导表中有一列是日期。我在该列上使用了过滤器。 我有两种选择日期的方法。单击日历并直观地选择日期。或者输入它...
我怎样才能让这个boostrap5.3下拉菜单居中并占据页面的所有宽度？
我需要将下拉菜单设置为没有内容的页面，占据页面的所有宽度。我还需要将菜单的所有“lorem”链接放在导航栏中的中央。我……
我可以将引导类转换为纯CSS吗？ 比如将 'class="container-sm' 转换为普通 css。 我想知道 bootst 中包含“container-sm”类的 CSS...
Django Bootstrap 卡组如果 forloop 可整除
我正在尝试使用引导卡。但我有问题。 当我添加要显示为卡片的新帖子时，我显示的帖子超过 5 个，它们开始挤压。 我正在尝试使用 forloop 计数器来保持...
我想知道我们如何知道在哪里使用容器或容器液体以及使用容器和容器液体时应该做什么或避免什么？ 需要清楚地了解差异
如何使用html表格打印乘法表（代码是Javascript）？
这是我的代码，它工作得很好。我只是想通过使用 Html 表格来打印表格，并且还想在其上应用 bootstrap 来添加边框，乘法表以...
我在索引中添加了一个查询字符串参数，目的是它可以显示错误等信息。尽管我正在努力让它在页面加载时显示。 我正在使用 $('#toast')....
将 Bootstrap 4 添加到 Slate V1 - 在 Chrome 开发者工具中获取两个索引
我是网络开发方面的新手。我以前做过一些开发，但不是关于Web的。 我了解 CSS 是什么、Javascript 的作用以及基本 HTML 的基础知识。 我已经
我使用bootstrap 4 alpha 6版本。在我的页面中，我有几个折叠块。我想在用户打开/关闭该块时更改图标。由于我有几个这样的块，我使用了类，但它不起作用。
Bootstrap 5 justify-content 无法正常工作并且无法垂直居中内容
我有以下代码，我使用 bootstrap 5： ...
我正在使用 bootstrap 和 javascript 开发一个 HTML 网站。我正在尝试使用引导网站中的以下代码添加吐司： 我正在使用 bootstrap 和 javascript 开发一个 HTML 网站。我正在尝试使用引导程序网站中的以下代码添加吐司： <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <img src="..." class="rounded mr-2" alt="..."> <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> 但是吐司并没有出现，如图所示。它只是在导航和轮播之间留下了间隙。 我已经从引导网站导入了所有这些脚本： <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 并将以下内容放入我的 javascript 文档中： $('.toast').toast(option) 但是，什么也没发生。我希望有人能帮助我:) 您需要输入有效的选项。我：eshow, hide or a callback function。请参阅 - https://getbootstrap.com/docs/4.2/components/toasts/。 $('.toast').toast('show'); <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <img height="200px" width="200px" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" class="rounded mr-2" alt="..."> <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> 如果您不想自动关闭 Toast，请添加 data-autohide="false"。 $('.toast').toast('show') <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="toast" data-autohide="false"> <div class="toast-header"> <svg class=" rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"> <rect fill="#007aff" width="100%" height="100%" /></svg> <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="toast" data-autohide="false"> <div class="toast-header"> <svg class=" rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"> <rect fill="#007aff" width="100%" height="100%" /></svg> <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> 文档准备好后，您需要启动“ $(".toast").toast('show'); 。 <script> $(document).ready(function() { $(".toast").toast('show'); }); </script> 首先，你需要将吐司固定在顶部或底部，具体取决于你想要的位置。 <div role="alert" aria-live="assertive" aria-atomic="true" class="toast fixed-bottom m-5 ms-auto" data-bs-autohide="false"> <div class="toast-header"> <img src="..." class="rounded me-2" alt="..."> <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> <script> window.onload = (event) => { let myAlert = document.querySelector('.toast'); let bsAlert = new bootstrap.Toast(myAlert); setTimeout(function () { bsAlert.show(); }, 5000); }; </script> 我尝试了这个解决方案，但我收到一个 JS 错误“Uncaught ReferenceError: bootstrap is not Defined”，这似乎阻止了烤面包机的显示。 我看到的唯一区别是我正在使用 bootstrap5，并且 bootstrap 似乎不再需要 JQuery，因此它不包含在基本模板中。 渲染后我在基本模板中看到的是： <head> ... <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" rel="stylesheet"> ... </head> <body> ... <toaster html goes here> .... <script crossorigin="anonymous" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </body 我不知道为什么 bootstrap 是未定义的，因为 JS 是明确链接的，但我是 bootstrap 的新手，所以可能做了其他错误。我正在使用 django-bootstrap5 应用程序，其他一切似乎都工作正常。 可能想考虑使用这个库，它通过引导程序简化了 toast 的使用： https://github.com/zhiftyDK/bootstrap-toast
所以我试图制作一个包含 4 个视频的轮播，但遇到了一些问题，但不明白为什么。首先我只能通过屏幕底部中间的圆圈来切换视频，我不能...
阅读文档，我试图在 bootstrap 5 中找到一种方法，如果切换开关输入设置为“关闭”，则禁用其他输入字段？ 父元素是#member_form，开关是'toggles...
我正在尝试在简单的 django 应用程序中使用复选框控件。代码逻辑似乎没问题，但我得到一个空的水果列表（[无，无]）。我不知道为什么它不起作用，任何人都可以
我有一个场景，我想将一些按钮对齐在同一水平线上。我不明白为什么 mat-icon-button 没有与其他按钮相同的对齐方式。两者都有
<p-cellEditor style="width: 100%;"> <ng-template pTemplate="input"> <p-inputNumber [(ngModel)]="object.amount" name="chargedAmount" mode="currency" currency="PHP" [disabled]="disableFieldEdit"></p-inputNumber> </ng-template> <ng-template pTemplate="output"> {{ object.amount | currency: 'PHP'}} </ng-template> </p-cellEditor> 我已经添加了disableFieldEdit，问题是字段显示不可见，因为禁用为灰色。我需要单击该字段才能查看其是否已禁用 您无法禁用 p-cellEditor，您应该使用 ngIf 指令，以便在单元格可编辑的情况下显示 p-cellEditor，否则您将显示静态单元格 <p-cellEditor style="width: 100%;" *ngIf="canEditCell;else staticCell"> <ng-template pTemplate="input"> <p-inputNumber [(ngModel)]="object.amount" name="chargedAmount" mode="currency" currency="PHP" [disabled]="disableFieldEdit"></p-inputNumber> </ng-template> <ng-template pTemplate="output"> {{ object.amount | currency: 'PHP'}} </ng-template> </p-cellEditor> <ng-template #staticCell> {{ rowData[col.field] }} </ng-template>