bootstrap-4 相关问题

为什么Pagespeed总是显示最大的内容绘制元素

为什么这张图片在 pagespeed mobile 中总是显示为最大内容，真正的文件图像只是 6kb 格式的 webp 和大小 367x141 像素。它非常小，我可以压缩，但在页面速度中它总是......

Bootstrap 5 下划线默认更改了？

在 Bootstrap 4 中，我理解它将默认的文本装饰设置为无。 但是使用 Bootstrap 5，如果我只是添加一个原始锚标记，它现在会显示蓝色文字和下划线。 我正在寻找...

通过 Bootstrap4 对列进行排序

我有 3 列，我想在桌面和移动设备上以不同的方式订购。 目前，我的网格如下所示： 1 我有 3 列，我想在桌面和移动设备上以不同的方式订购。 目前，我的网格如下所示： <div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md-6"> 2 </div> <div class="col-xs-6 col-md-12"> 3 </div> </div> 在移动视图中我希望有以下输出： 1-3-2 不幸的是，我不知道如何使用 Bootstrap 4 中的 .col-md-push-* 和 .col-md-pull-* 类来解决这个问题。 2021 - Bootstrap 5 响应式订购类现在为 order-first、order-last 和 order-0 - order-5 演示 2018 - Bootstrap 4 响应式订购课程现在为order-first、order-last和order-0 - order-12 Bootstrap 4 **push** **pull** 类现在为 `push-{viewport}-{units}` 和 `pull-{viewport}-{units}`，并且 `xs-` 中缀已被删除。要在 mobile/xs 上获得所需的 1-3-2 布局，请执行以下操作：[Bootstrap 4 推拉演示](http://www.codeply.com/go/OmrcmebUp)（这只适用于 4.0 beta 之前的版本） 引导程序4.1+ 由于 Bootstrap 4 是 Flexbox，因此很容易更改列的顺序。列可以从 order-1 到 order-12 进行排序，例如相对于父级 order-md-12 order-2 的 md（最后一个在 xs，第二个在 .row）。 <div class="container"> <div class="row"> <div class="col-3 col-md-6"> <div class="card card-body">1</div> </div> <div class="col-6 col-md-12 order-2 order-md-12"> <div class="card card-body">3</div> </div> <div class="col-3 col-md-6 order-3"> <div class="card card-body">2</div> </div> </div> </div> 演示：使用order-*类更改顺序 桌面（较大屏幕）： 移动设备（较小的屏幕）： 还可以使用 flexbox 方向实用程序... 更改列顺序 <div class="container"> <div class="row flex-column-reverse flex-md-row"> <div class="col-md-8"> 2 </div> <div class="col-md-4"> 1st on mobile </div> </div> </div> 演示：Bootstrap 4.1 使用 Flexbox 方向更改顺序 旧版本演示 演示 - 阿尔法 6 演示 - 测试版 (3) 查看更多 Bootstrap 4.1+ 订购演示 相关 Bootstrap 4 中使用推/拉和 col-md-12 的列排序 Bootstrap 4 更改列的顺序 A-C-B A-B-C 这也可以通过 CSS“Order”属性和媒体查询来实现。 类似这样的： @media only screen and (max-width: 768px) { #first { order: 2; } #second { order: 4; } #third { order: 1; } #fourth { order: 3; } } CodePen 链接：https://codepen.io/preston206/pen/EwrXqm 即使这样也行： <div class="container"> <div class="row"> <div class="col-4 col-sm-4 col-md-6 order-1"> 1 </div> <div class="col-4 col-sm-4 col-md-6 order-3"> 2 </div> <div class="col-4 col-sm-4 col-md-12 order-2"> 3 </div> </div> </div> 我正在使用 Bootstrap 3，所以我不知道是否有更简单的方法来实现 Bootstrap 4，但这个 css 应该适合你： .pull-right-xs { float: right; } @media (min-width: 768px) { .pull-right-xs { float: left; } } ...并将类添加到第二列： <div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md-6 pull-right-xs"> 2 </div> <div class="col-xs-6 col-md-12"> 3 </div> </div> 编辑： 哦...看起来我上面写的正是 Bootstrap 4 中的 .pull-xs-right 类：X 只需将其添加到第二列，它应该可以完美工作。 将此类用于第一列 第二个： 第三： 由于列排序在 Bootstrap 4 beta 中不起作用，如上面重新访问的答案中提供的代码中所述，您将需要使用以下内容（如 codeply 4 Flexbox 顺序演示 - 提供的 alpha/beta 链接中所示）在答案中）。 <div class="container"> <div class="row"> <div class="col-3 col-md-6"> <div class="card card-block">1</div> </div> <div class="col-6 col-md-12 flex-md-last"> <div class="card card-block">3</div> </div> <div class="col-3 col-md-6 "> <div class="card card-block">2</div> </div> </div> 但请注意，“Flexbox order demo - beta”进入了 alpha 代码库，并将代码库更改为 Beta（并运行它）会导致 div 错误地显示在单列中 - 但这看起来像是一个 codeply 问题，因为切割并将代码粘贴到 codeply 之外的工作方式如上所述。 您可以做两个不同的容器，一个使用移动订单并隐藏在桌面屏幕上，另一个使用桌面订单并隐藏在移动屏幕上

如何使用 Bootstrap 和 jQuery 创建一个带有滚动阴影效果的收缩标题？

我正在使用 Bootstrap 4 和 jQuery 开发一个网页，我想创建一个当用户向下滚动页面时缩小尺寸并添加阴影效果的标题。我写了一些代码...

将“Id”选定的复选框传递到模态引导程序并发送到控制器

我有一个文章列表，我希望能够删除模式弹出窗口中选定的文章或所有文章。另外，我的视图中有复选框。我的想法 - 为每个人获取一个“Id”...

在引导卡之间添加间距

我正在尝试在提供的卡片之间添加一些节奏，但在卡片之间添加一些空间时遇到一些问题。 这是我的网站上目前的样子： 目前我的...

在Vue.js中导入Bootstrap

当我导入这个 Bootstrap 时我很挣扎。这是错误。 我已经做了 npm i boostrap jquery popper.js 。但是当我导入这些时，我收到了错误。 这是我从 m 进口的...

在较小的屏幕上查看网站时，Bootstrap 5 轮播标题文本会消失

我正在使用引导轮播代码。我的轮播文本在常规尺寸上看起来不错，但在较小尺寸的屏幕上看到时它就消失了。看起来文字已经隐藏在图像后面了。 ...

如何在 Django admin 中使用仪表板的 Bootstrap 主题？

我是 django 的新手，我想为 django 项目创建自己的自定义管理面板，我有一个 dashoard 的引导主题，我想将其作为我的项目的管理面板，如何做到这一点，我可以吗？ ..

n 不是 bs4.5.2 下拉菜单和 jquery 3.5.1 的构造函数错误

在index.html中，我包含了这些 <p>在index.html中，我包含了这些</p> <pre><code> &lt;script src=&#34;https://code.jquery.com/jquery-3.5.1.slim.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" data-cfemail="492a263b2c097b6770677a">[email protected]</a>/dist/umd/popper.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; </code></pre> <p>导致错误的代码是以下前进按钮：</p> <pre><code>&lt;div className=&#34;btn-group float-right&#34; role=&#34;group&#34; aria-label=&#34;Button group&#34;&gt; &lt;div className=&#34;dropdown&#34;&gt; &lt;button className=&#34;btn btn-success dropdown-toggle&#34; type=&#34;button&#34; id={`forwardDropdown-${issue.issueId}`} data-toggle=&#34;dropdown&#34; aria-haspopup=&#34;true&#34; aria-expanded=&#34;false&#34;&gt; Forward &lt;/button&gt; &lt;div className=&#34;dropdown-menu&#34; aria-labelledby={`forwardDropdown-${issue.issueId}`}&gt; &lt;a className=&#34;dropdown-item&#34; href=&#34;#&#34;&gt;Action&lt;/a&gt; &lt;a className=&#34;dropdown-item&#34; href=&#34;#&#34;&gt;Another action&lt;/a&gt; &lt;a className=&#34;dropdown-item&#34; href=&#34;#&#34;&gt;Something else here&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;button type=&#39;button&#39; className=&#34;btn btn-danger&#34;&gt;Discard&lt;/button&gt; &lt;/div&gt; </code></pre> <p>我得到的错误是</p> <pre><code>Uncaught TypeError: n is not a constructor at i.show (dropdown.js:175:22) at i.toggle (dropdown.js:126:10) at HTMLButtonElement.&lt;anonymous&gt; (dropdown.js:363:14) at Function.each (jquery-3.5.1.slim.min.js:2:3182) at E.fn.init.each (jquery-3.5.1.slim.min.js:2:1660) at t._jQueryInterface [as dropdown] (dropdown.js:350:17) at HTMLButtonElement.&lt;anonymous&gt; (dropdown.js:515:31) at HTMLDocument.dispatch (jquery-3.5.1.slim.min.js:2:42868) at v.handle (jquery-3.5.1.slim.min.js:2:40852) </code></pre> <p>react在屏幕上显示的错误如下</p> <pre><code>Script error. at handleError (http://localhost:3000/static/js/bundle.js:50096:58) at http://localhost:3000/static/js/bundle.js:50115:7 </code></pre> </question> <answer tick="false" vote="0"> <p>我也有同样的问题，最初我在我的基本模板中使用这些版本</p> <pre><code>&lt;script src=&#34;https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" data-cfemail="c1a2aeb3a481f3eff8eff2">[email protected]</a>/dist/umd/popper.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js&#34;&gt;&lt;/script&gt;``` When I changed to these versions below, my bootstrap dropdown started working properly. ```&lt;script src=&#34;https://code.jquery.com/jquery-3.5.1.slim.min.js&#34; integrity=&#34;sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="68180718180d1a46021b285946595e4659">[email protected]</a>/dist/umd/popper.min.js&#34; integrity=&#34;sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="0b6964647f787f796a7b4b3f253e2538">[email protected]</a>/dist/js/bootstrap.min.js&#34; integrity=&#34;sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt;``` I was compatibility issue, you can refer for the links here: `https://getbootstrap.com/docs/4.5/getting-started/introduction/` </code></pre> </answer> </body></html>

bootstrap 4 轮播图像幻灯片事件的功能

我正在使用带有 11 张幻灯片的 Bootstrap 4 轮播，它们按预期工作正常。我有另一个 div (#div-info) 说我希望在其中显示某些文本和一些其他图像按照轮播 sli...

图像未显示在 Django 网站的滑块中

我已完成显示 Django 网站项目的图像滑块的所有必要步骤。但是图像没有显示，没有显示任何错误，我认为我家有一个错误......

活动选项卡未在 HTML、CSS 的垂直选项卡布局中显示在图像上方

我正在开发一个具有垂直选项卡布局的网页，其中每个选项卡对应于一个图像和一些内容。我面临的问题是活动选项卡没有按预期出现在图像上方......

如何让我的 ngDropdown 菜单在悬停而不是单击时工作？

我正在使用带有 Angular Bootstrap 的模板。当我用鼠标悬停在下拉事件上而不是单击它时，我试图调用下拉事件。我该如何调用这个事件？ 我正在使用带有 Angular Bootstrap 的模板。当我用鼠标悬停在下拉事件上而不是单击它时，我试图调用下拉事件。我该如何调用这个事件？ <div ngbDropdown class="d-inline-block dropdown"> <a class="navbar-brand" id="dropdownBasic1" href="#basiccomponents" ngbDropdownToggle>Learning</a> <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="dropdown-primary"> <a class="dropdown-item">Learning Outcomes</a> <div class="dropdown-divider"></div> <a class="dropdown-item">Learning Plan</a> </div> </div> 在 html 模板中为您的 ngbDropdown 创建一个变量（无论名称是什么）： #drop 指定打字稿类型 ngbDropdown #drop="ngbDropdown" 在 ngbDropdown 上的事件 mouseenter 调用该方法： <li ngbDropdown #drop="ngbDropdown" (mouseenter)='over(drop)'> 在 ngbDropdownMenu 上的事件 mouseleave 调用该方法： <div ngbDropdownMenu (mouseleave)='out(drop)'> over(drop:NgbDropdown){ drop.open() } out(drop:NgbDropdown){ drop.close() } <li class="nav-item" ngbDropdown #drop="ngbDropdown" display="dynamic" placement="bottom-end" (mouseenter)='over(drop)' (mouseleave)='out(drop)'> <a class="nav-link" tabindex="0" ngbDropdownToggle id="navbarDropdown3" role="button"> Dynamic </a> <div ngbDropdownMenu aria-labelledby="navbarDropdown3" class="dropdown-menu"> <a ngbDropdownItem href="#" (click)="$event.preventDefault()">Action</a> <a ngbDropdownItem href="#" (click)="$event.preventDefault()">Another action</a> <a ngbDropdownItem href="#" (click)="$event.preventDefault()">Something else here</a> </div> </li> 您可以使用 mouseover 代替 mouseenter，但 mouseenter 更好。 您可以使用 mouseout 代替 mouseleave，但 mouseleave 更好。 dropdown API 有一个 toggle() 方法，以及显式 open() 和 close()。通过绑定到 (mouseenter) 和 (mouseleave) 事件来在悬停时调用它们。 以下是基础知识，这不是完整的示例。您需要提供下拉菜单的参考。 <div ngbDropdown class="d-inline-block dropdown" (mouseenter)="onHover($event)" (mouseleave)="onHover($event)"> ... <div> onHover(event): void { this.myDropDown.toggle(); } 尝试使用带有 mouseleave 和 mouseenter 事件的角度材料。 参考：https://www.thetopsites.net/article/54301126.shtml#:~:text=To%20hide%20menu%2C%20add%20mouseleave%20event%20for%20a%20menu.&text=Demos%20 %3E%20Menu%2C%20Now%20on%20点击，库%20到%20构造%20UI%2FUX。 演示：https://stackblitz.com/edit/example-angular-material-toolbar-menu-wrut3v

在symfony项目中使用yarn安装Bootstrap时出错

我尝试使用yarn命令在我的symfony项目中安装bootstrap 4： 从缓存中获取时出现错误完整性错误 我遵循 symfony 的指导文档：https://symfony.com/doc/current/

了解 Bootstrap 5 变量导入顺序覆盖

我不明白以下情况。我的 app.scss 中有这样的 SCSS 变量导入顺序 @import '~/node_modules/bootstrap/scss/functions'; @import '~/node_modules/bootstrap/scss/var...

模式搜索框中的 select2 无法像禁用一样工作

我有一个模态，它有一个 select2 组件，但它没有按预期工作，搜索框就像被禁用一样 我有一个模态，它有一个 select2 组件，但它没有按预期工作，搜索框就像被禁用了 <div class="modal fade" id="m_modal_1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 这是我的模态代码 $('#m_modal_1').on('shown.bs.modal', function () { $('#id_golongan').select2({ placeholder: "Pilih Golongan" }) }); 这是我的JS 我已经摆脱了 tabindex="-1" 并使用了 $.fn.modal.Constructor.prototype.enforceFocus = function() {}; 但不起作用，如果我使用 dropdownParent: $("#modal_penguasaan") 当我点击时模态消失 我该怎么做才能使当我单击 select2 时模式不会消失并且搜索框正常工作 这就是我解决问题的方法；而不是在模式中删除 tabindex="-1"： 我编写了以下代码，它适用于 Bootstrap 版本 >5.2： $(document).ready(function () { $.fn.modal.Constructor.prototype.enforceFocus = function () {}; $("#single-select-field").select2({ theme: "bootstrap-5", placeholder: "Select a category", allowClear: true, dropdownParent: $("#addModal") //ID of the Modal, }); });

翻译自定义文件输入 Bootstrap 4

我正在使用引导程序并遵循此文档： 我正在使用引导程序并遵循此文档： <div class="custom-file"> <input type="file" class="custom-file-input" id="customFileLang" lang="es"> <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label> </div> $custom-file-text: ( en: "Browse", es: "Elegir" ); 即使添加了 lang="es" 属性，输入文本也不会被翻译。 这里有一个codepen，我缺少什么？ https://codepen.io/anon/pen/ZxGNrw 这是因为 Bootstrap SASS 没有导入到 Codepen 中。您首先需要 @import "bootstrap/functions" （因为这就是 $custom-file-text() 所在的位置），进行更改，最后 @import "bootstrap".... @import "bootstrap/functions"; $custom-file-text: ( en: "Browse", es: "Elegir" ); @import "bootstrap"; 我不知道如何将 Bootstrap SASS 导入 Codepen，但这里有一个 Codeply 上的工作示例：https://www.codeply.com/go/2Mo9OrokBQ 相关问题： Bootstrap 4 文件输入 好吧，实现这一点的最佳方法就是覆盖 CSS 伪类 ::after .custom-file-label::after { content: "Charger";} 如果覆盖 CSS，最好使用“:lang()”选择器仅将标签应用于给定语言： .custom-file-input:lang(fr) .custom-file-label::after { content: "Parcourir"; } 我也有同样的问题。自定义文件标签中的属性数据浏览修复了它： <div class="custom-file"> <input type="file" class="cursor-pointer custom-file-input" accept="image/*" id="foto" name="foto"> <label class="custom-file-label" for="foto" data-browse="Buscar">Seleccione un archivo</label> </div>

Active 类未更改为引导程序中导航栏的项目

我有一个来自引导程序的导航栏，它应该在导航项或单击时的锚元素上添加活动类，但是在浏览器中检查它时它没有改变状态，我不明白为什么......

如何修复评论文本的对齐方式？

我想将评论的文本放在用户图像下方，如下布局： 这是当前的 html： ... 我想将评论的文本放在用户图像下方，如下布局： 这是当前的html： <div class="custom-box"> <div class="comments-container"> <div class="dropdown-container p" onclick="toggleDropdown()" > <span class="mt-1" >التعليقات</span > <span class="arrow mt-1"></span> </div> <div id="dropdownContent" class="dropdown-content" > <h3>إضافة تعليق</h3> <div class="comment-input-container" > <input type="text" id="commentText" class="comment-input" /> </div> <button onclick="addComment()" class="add-comment-button" > أضف </button> <div id="commentsList"></div> </div> </div> </div> 这是造型： .comments-container { padding-bottom: 0px !important; .dropdown-container { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-radius: 8px; margin-bottom: 20px; cursor: pointer; font-weight: 900; } .dropdown-container:hover { opacity: 0.8; } .dropdown-container .arrow { padding: 15px; border-radius: 3px; height: 50px; color: black; padding-right: 30px; font-size: 14px; position: relative; -moz-appearance: none; -webkit-appearance: none; appearance: none; border: none; background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>") no-repeat; background-position: right 5px top 50%; } .dropdown-content { display: none; padding: 20px; border-radius: 8px; margin-top: 10px; } .dropdown-content.show { display: block; } .comment-card { display: flex; flex-direction: row; align-items: flex-start; background-color: white; padding: 10px; border-radius: 15px; margin-top: 10px; margin-left: 10px; border: 1px solid #ddd; } .comment-card img { border-radius: 50%; width: 40px; height: 40px; margin-left: 10px; } .comment-content { display: flex; flex-direction: column; flex-grow: 1; } .comment-header { display: flex; justify-content: space-between; align-items: center; width: 100%; padding-left: 10px; } .comment-header .user-name { font-size: 14px; font-weight: 900; color: #000; } .comment-header .comment-date { font-size: 12px; color: #888; } .comment-text { margin-top: 5px; font-size: 16px; padding-left: 10px; } .add-comment-button { padding: 10px 20px; background-color: #0056b3; color: white; border: none; border-radius: 35px; width: 150px; height: 42px; cursor: pointer; margin-top: 20px; margin-left: 10px; } .add-comment-button:hover { background-color: #004494; } .comment-input-container { display: flex; align-items: center; margin-top: 10px; } .comment-input { flex-grow: 1; border-radius: 10px; border: 1px solid #ddd; padding: 10px; margin-left: 10px; height: 60px; } } 和 JavaScript : <script> document.addEventListener("DOMContentLoaded", function () { addDefaultComment(); // Add a default comment when the page loads keepDropdownOpen(); // Keep the dropdown open by default }); function toggleDropdown() { const dropdownContent = document.getElementById("dropdownContent"); dropdownContent.classList.toggle("show"); } function keepDropdownOpen() { const dropdownContent = document.getElementById("dropdownContent"); dropdownContent.classList.add("show"); // Keep the dropdown open by default } function addComment() { const commentText = document.getElementById("commentText").value; if (commentText.trim() === "") return; createCommentElement(commentText, "زائر"); // Replace "زائر" with actual user name if available document.getElementById("commentText").value = ""; } function createCommentElement(commentText, userName) { const commentList = document.getElementById("commentsList"); const newComment = document.createElement("div"); newComment.classList.add("comment-card"); const userImage = document.createElement("img"); userImage.src = "https://via.placeholder.com/40"; // Placeholder image newComment.appendChild(userImage); const commentContent = document.createElement("div"); commentContent.classList.add("comment-content"); const commentHeader = document.createElement("div"); commentHeader.classList.add("comment-header"); const userNameElement = document.createElement("span"); userNameElement.classList.add("user-name"); userNameElement.innerText = userName; commentHeader.appendChild(userNameElement); const commentDate = document.createElement("span"); commentDate.classList.add("comment-date"); const date = new Date(); commentDate.innerText = `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`; commentHeader.appendChild(commentDate); commentContent.appendChild(commentHeader); // Add a line break after the comment header const lineBreak = document.createElement("br"); commentContent.appendChild(lineBreak); const commentTextElement = document.createElement("div"); commentTextElement.classList.add("comment-text"); commentTextElement.innerText = commentText; commentContent.appendChild(commentTextElement); newComment.appendChild(commentContent); commentList.appendChild(newComment); } function addDefaultComment() { const defaultCommentText = "هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!"; createCommentElement(defaultCommentText, "زائر"); } document.getElementById("commentText").addEventListener("keypress", function (event) { if (event.key === "Enter") { event.preventDefault(); // Prevents the default action of the Enter key addComment(); } }); </script> 我应该怎么做才能获得像图像一样的所需输出？ 评论的文本应该从用户图像下方开始，我的输出显示评论的文本在其旁边而不是在其下方，有什么问题？或者我错过了什么？请指出正确的方法 只需将 CSS text-align:right; 应用于 .comment-card 类即可解决该问题。 .comment-card { 文本对齐：右； }