link-header 相关问题

卡片标题中的居中文本

使用 bulma 可以轻松定位文本 - 通常。我无法将卡头属性居中。我的尝试：通常使用 bulma 可以轻松定位文本。我无法将 card-header 属性居中。我的尝试： <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css" rel="stylesheet"/> <div class="columns mt-3"> <div class="column is-3 ml-3" style="display: flex;"> <div class="card has-background-warning-light"> <div class="card-header"> <p class="has-text-right is-size-5 is-uppercase has-text-centered"> regular price </p> </div> <div class="card-image"> <div class="has-background-warning"> <div class="has-text-centered"> <span class="is-size-1 has-text-weight-bold"> $ 999 </span> </div> </div>  </div> <div class="card-content"> <div class="media">  <div class="media-content"> <p class="title is-3" style="display: flex;"> standard price available for everyone </p> <p class="subtitle is-6 mt-1"> regular price </p> </div> </div> <div class="content has-text-centered"> <button class="button is-dark"> BUY </button> </div> </div> </div> </div> 为什么我的has-text-centered没有应用在card-header而是其他地方？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bulma Card Header Centered</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css" rel="stylesheet"/> <style> .card-header { justify-content: center; } </style> </head> <body> <div class="columns mt-3"> <div class="column is-3 ml-3"> <div class="card has-background-warning-light"> <div class="card-header"> <p class="is-size-5 is-uppercase has-text-centered"> regular price </p> </div> <div class="card-image"> <div class="has-background-warning"> <div class="has-text-centered"> <span class="is-size-1 has-text-weight-bold"> $ 999 </span> </div> </div> </div> <div class="card-content"> <div class="media"> <div class="media-content"> <p class="title is-3"> standard price available for everyone </p> <p class="subtitle is-6 mt-1"> regular price </p> </div> </div> <div class="content has-text-centered"> <button class="button is-dark"> BUY </button> </div> </div> </div> </div> </div> </body> </html>

完整日历：使用 IF 语句为事件着色

我有一个基于站点管理员打开的票证的日历。我们有四种类型的门票：待办的进行中完成的取消这是我有日历的 div：我有一个基于站点管理员打开的票证的日历。我们有四种类型的门票：待定进行中完成了取消这是我有日历的div： <div class="col-lg-6 col-md-10 col-sm-11"> <div class="card"> <div class="card-header" data-background-color="blue"> <h4 class="title">Calendario</h4> </div> <br> <section class="content"> <?php $events = TicketData::getEvents(); foreach($events as $event){ $thejson[] = array("title"=>$event->title,"url"=>"./?view=editticket&id=".$event->id,"start"=>$event->date_at."T".$event->time_at); } // print_r(json_encode($thejson)); ?> <script> $(document).ready(function() { $('#calendar').fullCalendar({ header: { left: 'prev,next, today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultDate: jQuery.now(), editable: false, eventLimit: true, // allow "more" link when too many events events: <?php echo json_encode($thejson); ?> }); }); </script> <div class="row"> <div class="col-md-12"> <div id="calendar"> </div> </div> </div> </section> </div> </div> 门票的数据库结构很简单：id、title、description、date_at、time_at、created_at、tecnico_id和status_id。我想使用 if 脚本“着色”事件：这是我的代码，但它不起作用。 <section class="content"> <?php $events = TicketData::getEvents(); // $status->status_id; foreach($events as $event){ $thejson[] = array("title"=>$event->title,"url"=>"./?view=editticket&id=".$event->id,"start"=>$event->date_at."T".$event->time_at,); $thejsonColor[] = array($event->status_id); } // print_r(json_encode($thejson)); ?> <script> $(document).ready(function() { $('#calendar').fullCalendar({ header: { left: 'prev,next, today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultDate: jQuery.now(), editable: false, eventLimit: true, // allow "more" link when too many events events: <?php echo json_encode($thejson); ?>, if ($thejsonColor=1){ eventColor: 'fb8c00' }else if ($thejsonColor=2){ eventColor: 'ff0' } else if ($thejsonColor=3){ eventColor: '43a047' } else { eventColor: '00acc1' } }); }); </script> 我想让它们符合颜色标准，这样用户就可以知道哪些票是待处理的、不完整的、完整的和已取消的。我是 javascript 的新手，我不知道如何做到这一点。你们能帮助我或指出我应该如何做吗？您可以在迭代事件数组时设置颜色： <?php // helper function to pick the right color function getColor($id) { $eventColor = ''; if ($id == 1) { $eventColor = '#fb8c00'; } else if ($id == 2) { $eventColor = '#ff0'; } else if ($id == 3) { $eventColor = '#43a047'; } else { $eventColor = '#00acc1'; } return $eventColor; } $events = TicketData::getEvents(); //pulls the events from TicketData.php foreach($events as $event) { $thejson[] = array( "title" => $event->title, "url" => "./?view=editticket&id=".$event->id, "start" => $event->date_at."T".$event->time_at, "color" => getColor($event->status_id)); } ?> 然后就像你现在正在做的那样回显事件： <script> $(document).ready(function() { $('#calendar').fullCalendar({ header: { left: 'prev,next, today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultDate: jQuery.now(), editable: false, eventLimit: true, // allow "more" link when too many events events: <?php echo json_encode($thejson); ?>, }); }); </script> 或者您可以通过从 php 中的表中选择来完成此操作，例如： $sql = "SELECT CASE WHEN tickets='Pending'" THEN '#C6E0B4' WHEN tickets='In progres' THEN '#FFFF99' END AS color" $schedules = $conn->query($sql); $sched_res = []; foreach($schedules->fetch_all(MYSQLI_ASSOC) as $row){ $sched_res[$row['id']] = $row; } 然后就像你现在正在做的那样回显事件： <script> $(document).ready(function() { $('#calendar').fullCalendar({ header: { left: 'prev,next, today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultDate: jQuery.now(), editable: false, eventLimit: true, // allow "more" link when too many events events: <?php echo json_encode($thejson); ?>, }); }); </script>

ASP.NET MVC 项目模板在移动设备上无法调整为 100%

我不明白为什么 Web .Net MVC 项目上的默认模板没有在移动设备中调整为 100% 宽度。我在视图上使用数据表： @模型IEnumerable 我不明白为什么 Web .Net MVC 项目上的默认模板没有在移动设备中调整为 100% 宽度。我在视图上使用数据表： @model IEnumerable<iziConference.Models.EventAttendee> <h2>Participantes.</h2> <br /> <button><a style="text-decoration: none" href='@Url.Action("Create", new { eventId = ViewBag.EventId })'>Criar Participante</a></button> <button id="at-btn-refresh"> Actualizar</button> <input id="eventId" type="hidden" value="@ViewBag.EventId"> <table id="at-attendees-list" cellpadding="10" border="1" class="row-border stripe"> <thead> <tr> <th>ID</th> <th>Tipo</th> <th>Nome</th> <th>Email</th> <th>Estado </th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr id="[email protected]_Id"> <td style="padding: 5px"> @Html.DisplayFor(modelItem => item.Attendee.Id) </td> <td> @Html.DisplayFor(modelItem => item.AttendeeType) </td> <td> @Html.DisplayFor(modelItem => item.Attendee.Name) </td> <td> @Html.DisplayFor(modelItem => item.Attendee.Email) </td> <td> @if (item.IsActive) { <button id="[email protected]_Id" class="at-btn-active-state active" data-attendee-id="@item.Attendee_Id" data-attendee-name="@item.Attendee.Name" data-active-new-state="false" data-show-confirmation-alert="true">Desactivar</button> } else { <button id="[email protected]_Id" class="at-btn-active-state inactive" data-attendee-id="@item.Attendee_Id" data-attendee-name="@item.Attendee.Name" data-active-new-state="true" data-show-confirmation-alert="true">Activar</button> } </td> </tr> } </tbody> </table> 由脚本加载： var _atteendeesList = "at-attendees-list"; $("#" + _atteendeesList).DataTable({ "paging": false, "info": false, "language": { "search": "Pesquisar:", "info": "Participantes inscritos: _PAGES_" } }); 使用默认的_Layout.cshtml： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>izigo Conference - Gestor de Conteúdos</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> <header> <div class="content-wrapper"> <section id="login"> @Html.Partial(MVC.Account.Views._LoginPartial) </section> <div style="padding: 10px;"> @if (Request.IsAuthenticated) { <nav> <ul id="menu"> <li>@Html.ActionLink("Home", MVC.Home.Index())</li> <li>@Html.ActionLink("Participantes", MVC.Attendee.Index())</li> <li>@Html.ActionLink("Check-in", MVC.Checkin.Index())</li> </ul> </nav> } </div> </div> </header> <div id="body"> @RenderSection("featured", required: false) <section class="content-wrapper main-content clear-fix"> @RenderBody() </section> </div> <footer style="padding-left: 25px;"> <div class="content-wrapper"> <div class="float-left"> <p>© @DateTime.Now.Year - <a href="https://www.izigo.pt/conference" target="_blank">izigo Conference</a> - <i>Powered by</i><a href="https://www.izigo.pt" target="_blank">izigo.pt</a></p> </div> </div> </footer> @Scripts.Render("~/bundles/jquery", "~/bundles/iziconference") @RenderSection("scripts", required: false) </body> </html> 研究了 dataTables 库的选项后，我找到了一个创建响应式解决方案的选项：我已经包含了响应表结构和columnDefs的选项，以选择哪些选项在移动设备中保持可见： $("#" + _atteendeesList).DataTable({ "responsive": true, "columnDefs": [ { responsivePriority: 1, targets: 0 }, { responsivePriority: 2, targets: -1 } ], "paging": false, "info": false, "language": { "search": "Pesquisar:", "info": "Participantes inscritos: _PAGES_" } }); 我还必须在捆绑包中包含数据表扩展的 js 和 css 响应式库（可在此处下载：https://datatables.net/download/）： bundles.Add(new ScriptBundle("~/bundles/iziconference").Include( "~/Content/Scripts/datatables.min.js", "~/Content/Scripts/dataTables.responsive.min.js")); // add-on bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/Styles/datatables.min.css", "~/Content/Styles/responsive.dataTables.min.css"));

无需封闭标签的角度内容投影

有没有一种方法可以实现不包含标签的内容投影？这是我的组件：有没有一种方法可以实现不包含标签的内容投影？这是我的组件： <div class="flex flex-column container"> <div class="flex flex-column header"> <ng-content select="[header]"></ng-content> </div> <div class="flex flex-column body"> <ng-content></ng-content> </div> <div class="flex flex-column footer"> <ng-content select="[footer]"></ng-content> </div> </div> 请注意，有两个可能的插槽 header 和 footer。这些组件应该这样使用： <div header>Header</div> Body <div footer>Footer</div> 如果没有这个div我该如何使用这个组件？我的意思是，我只想添加内容，因为如果我添加 div，它可能会破坏布局。您可以尝试在 ngProjectAs 标签上使用 ng-container 属性： <ng-container ngProjectAs="[header]">Header</ng-container> Body <ng-container ngProjectAs="[footer]">Footer</ng-container> 更多相关内容请参见 Angular 文档

在React中不显示服务器上的图像

这是代码从“反应”导入反应；从“react-dom/client”导入ReactDOM； const 标头 = () => { 返回（ <... 这是代码 import React from "react"; import ReactDOM from "react-dom/client"; const Header = () => { return ( <div className="header"> <div className="logo-container"> <img className="logo" src="/assets/logo.jpg" /> </div> <div className="nav-items"> <ul> <li>Home</li> <li>About us</li> <li>Contact us</li> <li>Cart</li> </ul> </div> </div> ); }; const AppLayout = () => { return ( <div className="App"> <Header /> </div> ); }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<AppLayout />); 请帮助我，因为我是新反应。我期待在服务器上显示图像如果仍然不起作用，请尝试在上面的代码中添加 alt 标签试试这个：从“react”导入React；从“react-dom/client”导入 ReactDOM； const Header = () => { return ( <div className="header"> <div className="logo-container"> <img className="logo" src={process.env.PUBLIC_URL + "/assets/logo.jpg"} alt="Logo" /> </div> <div className="nav-items"> <ul> <li>Home</li> <li>About us</li> <li>Contact us</li> <li>Cart</li> </ul> </div> </div> ); }; const AppLayout = () => { return ( <div className="App"> <Header /> </div> ); }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<AppLayout />);

这个标题如何粘贴？

这是我的 ant-list-header elemet css 这是我的 ant-list-header elemet css <div class="ant-list-header" style=" position: sticky; top: 0; z-index: 100; height: 30px; "><div class="sc-eDZJSx kXYedM"><strong>Unmapped Rate Plans</strong><strong>See all</strong></div></div> 这是我的 ant-list-items 元素 <ul class="ant-list-items"></ul> 什么样的CSS会让我粘上ant-list-header 现在尝试过的位置：粘性但没有工作 .ant-list-header { position: sticky; top: 0; z-index: 100; height: 30px; background-color: white; } <div class="ant-list-header"> <div><strong>Unmapped Rate Plans</strong><strong>See all</strong></div> </div> <ul class="ant-list-items"> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> <li>some text</li> </ul>

向垫子表添加额外的行

所以我有一张垫子桌所以我有一张垫子桌 <mat-table class="table" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="tableDrop($event)" [dataSource]="tableDataSource"> <ng-container *ngFor="let column of columns; let i = index" [matColumnDef]="column.name"> <mat-header-cell *matHeaderCellDef cdkDrag dkDragLockAxis="x" cdkDragBoundary="mat-header-row"> {{ column.title }} </mat-header-cell> <mat-cell *matCellDef="let element"> {{ element[column.name] }} </mat-cell> </ng-container> <mat-header-row class="tableHeader" *matHeaderRowDef="tableDisplayedColumns" #tableHeaderRow> </mat-header-row> <mat-row class="tableRow" *matRowDef="let row; columns: tableDisplayedColumns;" [class.selected-row]="tableSelectedRows.has(row)" (click)="selectUnselectRow(row)"> </mat-row> </mat-table> 但我需要在表标题下为相应的行过滤器添加一行。我尝试在标题和实际行声明之间添加 <mat-row> ，但是由于过滤器是不同的输入（例如数字、自动完成选择和多选），我无法 *ngFor 它们（而且我不是当然我是否能够）编辑：忘记发布过滤器 HTML <div class="filterGroup"> <mat-form-field class="filterField"> <input matInput type="number" (keydown)="updateManualPage(1)" placeholder="Filter za param1" formControlName="filterParam1"> </mat-form-field> <mat-form-field class="filterField"> <input matInput (keydown)="updateManualPage(1)" placeholder="Filter za param2" formControlName="filterParam2" [matAutocomplete]="autoSingleSelect"> <mat-autocomplete #autoSingleSelect="matAutocomplete" class="filterSelect" panelClass="filterSelect"> <mat-option *ngFor="let option of dropdownSingleFilteredOptions | async" [value]="option.param2"> {{option.param2}} </mat-option> </mat-autocomplete> </mat-form-field> <mat-form-field class="filterField"> <mat-select class="filterMultiselect" placeholder="Filter za param3" formControlName="filterParam3" multiple panelClass="filterMultiselect"> <mat-option *ngFor="let option of tableDataSource.data" [value]="option.param3"> {{option.param3}} </mat-option> </mat-select> </mat-form-field> </div> 以及相关组件.ts tableDisplayedColumns: string[] = ['param1', 'param2', 'param3']; columns: any[] = [ { name: 'param1', title: 'Param1' }, { name: 'param2', title: 'Param2' }, { name: 'param3', title: 'Param3' } ]; 为了解决这个问题，我设法通过删除 *ngFor 并手动放入过滤器来做到这一点。 <mat-table class="table" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="tableDrop($event)" [dataSource]="tableDataSource"> <ng-container matColumnDef="param1"> <mat-header-cell *matHeaderCellDef cdkDrag cdkDragLockAxis="x" cdkDragBoundary="mat-header-row" [cdkDragStartDelay]="100"> Param1 <mat-form-field class="filterField"> <input matInput type="number" (keydown)="updateManualPage(1)" placeholder="Filter" formControlName="filterParam1"> </mat-form-field> </mat-header-cell> <mat-cell *matCellDef="let data"> <span>{{data.param1}}</span> </mat-cell> </ng-container> <ng-container matColumnDef="param2"> <mat-header-cell *matHeaderCellDef cdkDrag cdkDragLockAxis="x" cdkDragBoundary="mat-header-row" [cdkDragStartDelay]="100"> Param2 <mat-form-field class="filterField"> <input matInput (keydown)="updateManualPage(1)" placeholder="Filter" formControlName="filterParam2" [matAutocomplete]="autoSingleSelect"> <mat-autocomplete #autoSingleSelect="matAutocomplete" class="filterSelect" panelClass="filterSelect"> <mat-option *ngFor="let option of dropdownSingleFilteredOptions | async" [value]="option.param2"> {{option.param2}} </mat-option> </mat-autocomplete> </mat-form-field> </mat-header-cell> <mat-cell *matCellDef="let data"> <span>{{data.param2}}</span> </mat-cell> </ng-container> <ng-container matColumnDef="param3"> <mat-header-cell *matHeaderCellDef cdkDrag cdkDragLockAxis="x" cdkDragBoundary="mat-header-row" [cdkDragStartDelay]="100"> Param3 <mat-form-field class="filterField"> <mat-select class="filterMultiselect" placeholder="Filter" formControlName="filterParam3" multiple panelClass="filterMultiselect"> <mat-option *ngFor="let option of tableDataSource.data" [value]="option.param3"> {{option.param3}} </mat-option> </mat-select> </mat-form-field> </mat-header-cell> <mat-cell *matCellDef="let data"> <span>{{data.param3}}</span> </mat-cell> </ng-container> <mat-header-row class="tableHeader" *matHeaderRowDef="tableDisplayedColumns" #tableHeaderRow> </mat-header-row> <mat-row class="tableRow" *matRowDef="let row; columns: tableDisplayedColumns;" [class.selected-row]="tableSelectedRows.has(row)" (click)="selectUnselectRow(row)"> </mat-row> </mat-table>

当React Router中的路由命中时，如何有条件地渲染两个组件或更改两个出口？

我有一个 React 应用程序，我在其中使用 React Router。在我的布局组件中，我有这样的结构：从“反应”导入反应；从 './components/Header/Header' 导入标头；导入 Foo...

无法访问除我的html主页之外的其他页面

/* ************************** */ /* 标头*/ /* ************************** */ . header { 显示：柔性； justify-content：空间之间；对齐项目：居中；背景颜色：#fff；身高...

Next JS Link 标签有时会从动态路由中删除“/”

我正在使用 Next JS 12.2.0。我有如下链接标签， {帖子标题} 问题是某些 href 结尾有

Appwrite JWT 身份验证

我正在尝试通过经过身份验证的用户（JWT）执行Appwrite功能。我做什么：我创建电子邮件会话 curl --location 'http://localhost/v1/account/sessions/email' \ --header '内容类型：应用...

Alpine.js xcollapse 不适用于 laravel 组件和 p 标签

如果我使用p标签和组件，折叠总是打开的 ` 如果我使用 p 标签和组件，折叠始终是打开的 ` <div x-data="{ expanded: false }"> <x-nav-link @click="expanded = ! expanded" :href="'#'" :active="false">{{ __('Collapse') }}</x-nav-link> // This is not working <p x-show="expanded" x-collapse> <x-nav-link :href="'/'" :active="false" :sub="true">{{ __('Sub') }}</x-nav-link> </p> // This is working <div x-show="expanded" x-collapse> <x-nav-link :href="'/'" :active="false" :sub="true">{{ __('Sub') }}</x-nav-link> </div> </div> 控制台没有显示任何错误在您的示例中，标签包含一个肯定会由标签（或其他一些块标签）分隔的组件当浏览器遇到标签内的 block 标签时，会自动将其关闭，这样组件就会位于标签之外，不会受到 x-show="expanded" 的影响。您可以使用浏览器控制台来解决这个问题（我使用而不是您的组件进行测试）：通常浏览器还会尝试通过添加新的内容来修复问题标签匹配将保持孤立状态的结束标签解决方案可能是将组件插入非块类型标签中。否则必须更换 <\p> 标签。这里有一些对标签的参考

knative：基于自定义标头的路由？

我们可以创建一个有两个版本的knative服务，然后我们可以像这样配置流量。交通： - 最新修订：假百分比：100 修订名称： header-v1 - 最新修订：...

link rel=preload 可以与 fetch 一起使用吗？

我有一个大的 JSON blob，我想在我的网页中预加载。为此，我已将添加到我的页面。我还有一个 JS 请求要 fe...

React 组件的样式与其他组件的样式冲突

我有一个像这样的应用程序组件：常量应用程序 = () => { 返回（我有一个像这样的应用程序组件： const App = () => { return ( <Router> <Route exact path='/' component={Landing} /> <Route path='/login' component={Login} /> </Router> ) } 每个组件都有自己的目录和样式表。我的文件夹结构是这样的： src | | Landing| | | | Landing.js | Landing.module.css | | Login| | | | Login.js | Login.module.css | app.js index.js 我的问题是Login和Landing组件的样式表相互冲突，并且Landing页面看起来不太好。例如，登录的背景颜色适用于登陆页面，但我不希望这样。我只在每个组件中导入 CSS 文件，如下所示： import styles from './Landing.module.css' 这是我如何使用样式变量的示例： return ( <div className={styles.navBar}> <Link to="/"> <img className={styles.logo} src="https://image.flaticon.com/icons/png/512/2039/2039175.png" /> </Link> {loggedIn && <div> <button onClick={logout}>log out</button> <Link className={styles.navItem} to="/users">get users</Link> </div> } {!loggedIn && <div> <Link className={styles.navItem} to="/login">log in</Link> <Link className={styles.navItem, styles.btn} to="/signup">signup</Link> </div> } </div> ) 即使它很旧，我也会回答谁在后面：发生这种情况的原因是你的CSS选择器很可能具有相同的特异性，因此是外观的顺序决定了应用哪种样式。文件夹结构中的 Login 位于 Landing 之后，因此您的捆绑程序将使 Login 的样式出现在捆绑的 CSS 中的最后，然后它将覆盖 Landing 的样式。这个问题有很多解决方案：您可以增加您想要赢得的选择器的特异性（例如，通过在 CSS 文件中重复两次该类）您可以降低想要丢失的选择器的特异性（例如使用 :where()）如果您同意支持哪些浏览器（例如@layer），现在您可以使用级联层等等...

将三个 ts 线生成两个具有共享 x 轴的堆叠图

我有三个时间序列变量。其中两个包含在我的文件 roes.cvs 中，并使用以下代码绘制在一张图中：鱼子 <- read.csv(file="roes.csv", header=TRUE, sep=",&q...

如何在JWT Header中设置JWT类型

无法在令牌标头中设置 JWT 令牌类型。这是为了制作我已经在 JAX-RS 中开发的安全 API。基本上我已经通过 Jwts.builder() 方法生成了一个令牌，并且在...

使用 InertiaJs 和 Laravel 从数据库中删除用户

我在从数据库中删除记录时遇到问题。我正在使用 InertiaJS 和 Laravel。组件代码以下是链接/按钮代码：我在从数据库中删除记录时遇到问题。我正在使用 InertiaJS 和 Laravel。组件代码以下是链接/按钮代码： <Link class="trash" @click="submit(result.ChildID)"> Move to Trash </Link> 注意： ChildID 是数据库中子记录的 id。现在：当用户单击此链接时，将调用一个方法，如下所示。 methods: { submit: function (ChildID) { alert(ChildID) if (confirm("Are you sure you want to delete this child?")) { this.$inertia.delete('destroy/ChildID'); } }, }, 路线代码 Route::delete('destroy/{childID}',[childrenController::class,'destroy']); 控制器代码 public function destroy(children $childID){ $childID->delete(); return redirect()->route('View_Child_Profile'); } 现在，当我点击删除按钮时，我收到以下错误：试试这个。我认为你犯了错误“this.$inertia.delete('destroy/ChildID');” methods: { submit: function (ChildID) { alert(ChildID) if (confirm("Are you sure you want to delete this child?")) { this.$inertia.delete(`destroy/${ChildID}`); // or this.$inertia.delete('destroy/'+ChildID); } }, }, 这是我处理删除过程的方式。前视+惯性： import { Link } from '@inertiajs/inertia-vue3'; 在模板中： <Link method="delete" :href="route('admin.insta_feeds.destroy',id)">Delete</Link> 后端 Laravel：路线： Route::resource('insta_feeds', InstaFeedsController::class); 控制器功能： public function destroy(InstaFeed $insta_feed) { if(isset($insta_feed->image_path)){ Storage::delete($insta_feed->image_path); } $insta_feed->delete(); return Redirect::route('admin.insta_feeds.index'); }

用 Bootsrap 制作的网站右侧的空间不会消失吗？

无论我做什么，我用 Bootsrap 制作的网站右侧的空白都没有消失。如果有解决办法请告诉我无论我做什么，我用 Bootsrap 制作的网站右侧的空白都没有消失。如果有解决办法请告诉我 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Contact | Enba Camping</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link rel="stylesheet" href="style/style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> </head> <body> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>  <div class="container-fluid"> <div class="row"> <div class="col-sm-12 p-0"> <nav class="navbar navbar-expand-lg bg-body-tertiary p-0 "> <div class="container-fluid bg-dark "> <a class="navbar-brand text-light mb-2" href="index.html">Enba Camping</a> <button class="navbar-toggler btn btn-light btn btn-outline-light bg-light m-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon "></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav ms-auto"> <a class="nav-link text-light text-center" aria-current="page" href="index.html">Home</a> <a class="nav-link text-light text-center" href="aboutus.html">About us</a> <a class="nav-link active text-light text-center" href="contact.html" aria-disabled="true">Contact</a> </div> </div> </div> </nav> </div> </div> </div>   <div class="container-fluid p-0 bg-dark text-light"> <div class="row"> <div class="col-sm-6 ps-0"> <img src="images/lesly-derksen-F4fH5dAfZnE-unsplash.jpg" alt="" class=" d-block w-100 c-img "> </div> <div class="col-sm-6 d-flex justify-content-center align-items-center "> <div class="text-center"> <h2 class="fw-bold display-4 ">Bize Ulaşın</h2>  <div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">Adınız</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Name"> </div> <div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">Email Adres</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email Address"> </div> <div class="mb-3"> <label for="exampleFormControlTextarea1" class="form-label">Mesajınız</label> <textarea class="form-control" id="exampleFormControlTextarea1" placeholder="Message" rows="3"></textarea> </div> <div class=" gap-2 d-md-block "> <button class="btn btn-light " type="button">Send</button> </div> </div> </div> </div> </div>   <div class="container mt-sm-5"> <div class="row text-center "> <h1 class="d-flex justify-content-center">Mekanlarımız</h1> <hr> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card2.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Orman İçi Karavan Parkı</h5> <p class="card-text">Ormanın içinde konumlanan karavan parkımız, tam anlamıyla bir doğa kaçamağı sunuyor. Ormanın huzurlu atmosferinde kendinizi kaybedin. Karavanınızla konforlu bir konaklama deneyimi yaşayın.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız </a> </div> </div> </div> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card3.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Orman İçi Çadırlı Kamp</h5> <p class="card-text">Orman içi çadırlı kamp alanımız, doğa severler için bir cennet. Gölgeli ağaçlar arasında konumlanan çadırlarımızda, kuş cıvıltıları ve huzur içinde bir konaklama deneyimi sizi bekliyor.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız</a> </div> </div> </div> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card1.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Dağ Evi </h5> <p class="card-text">Dağ evimiz, şehrin gürültüsünden uzak,huzurlu bir konaklama imkanı sunuyor. Ferah odalarımızda dağ manzarasının keyfini çıkarabilir, gölet kenarındaki aktivitelerle vakit geçirebilirsiniz.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız</a> </div> </div> </div> </div> </div>   <div class="row my-4"> <div class="col-sm-12"> <h1 class="d-flex justify-content-center">Galeri</h1> <hr> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/hichem-meghachou-7I-Rj_E9ihI-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/jimmy-conover-J_XuXX9m0KM-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/josh-campbell-UbbjVyibFuc-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/shelby-cohron-ESNV6KmLJMg-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/tegan-mierle-fDostElVhN8-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/toa-heftiba-x9I-6yoXrXE-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> </div>   <div class="bg-dark text-light"> <div class="container"> <footer class="pt-5 mt-5 "> <div class="row "> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column "> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-md-5 offset-md-1 mb-3"> <form> <h4> Abone Ol ve Doğanın Güzelliklerini Kaçırma!</h4> <p class="fs-6">Doğanın kucaklayıcı atmosferine adım atmak, huzurla dolu anlar yaşamak ve Enba Camping'in sunduğu özel fırsatları kaçırmamak için hemen abone ol! Sitemize abone olarak, doğanın gizemli güzellikleri, özel indirimler ve etkinliklerden ilk sen haberdar olacaksın.</p> <p class="fs-6"> Unutulmaz anılar biriktirmek ve doğanın kollarında huzurlu bir deneyim yaşamak için abone ol, Enba Camping'in eşsiz dünyasına adımını at! 🏕️✨ </p> <div class="d-flex flex-column flex-sm-row w-100 gap-2"> <label for="newsletter1" class="visually-hidden">Email address</label> <input id="newsletter1" type="text" class="form-control" placeholder="Email address"> <button class="btn btn-primary" type="button">Subscribe</button> </div> </form> </div> </div> <div class="d-flex flex-column flex-sm-row justify-content-between border-top"> <p>© 2023 Company, Inc. All rights reserved.</p> <ul class="list-unstyled d-flex"> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#twitter"></use> </svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#instagram"></use> </svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#facebook"></use> </svg></a></li> </ul> </div> </footer> </div> </div>  </body> </html> 和CSS .jumb { vertical-align: inherit; } p { font-size: 24px; } .c-item { height: 480px; } .c-img { height: 100%; object-fit: cover; filter:brightness(0.9) } 这里。我不希望页面左右移动。我想让它适合全屏，但容器结构溢出了请将这段代码添加到您的 CSS 文件中。然后，它就会起作用。 .row{ margin-right: 0px; }

有没有一种方法可以在React中单击时嵌入链接来重定向组件？

我有一个导航栏，其路线设置如下：导入'../styles/Nav.css' 从 'react-router-dom' 导入 { BrowserRouter as Router, Routes, Route, Link} 从 '../components/Home' 导入 { Home }

使用 Pandas 在 Excel 中使用多个标题/嵌套列名称

我想转换/读取一个至少有3个标题的Excel文件。我搜索了一些关于嵌套列的解决方案，当它有两行标题时，可以使用 header=[0,1] 来读取 Excel 文件。但我...

如何以 Svelte 方式设置导出和开槽零件的样式？

Svelte slot 的功能是否像 vanilla-js/dom 一样（我似乎无法让它工作）。在 html/js 中我可以这样做：身体{颜色：红色;} /* 从外部设置暴露部分的样式 */ ...</desc> <question vote="0"> <p>Svelte <pre><code>slot</code></pre>的功能是否像 vanilla-js/dom 一样（我似乎无法让它工作）。</p> <p>在 html/js 中我可以做：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><style> body {color: red;} /* style exposed part from outside */ my-element::part(header) {color: green;} </style> <h1>Hello World</h1> <my-element> <div slot="header"><strong>Header</strong></div> <div slot="body">Body</div> </my-element> <script> customElements.define('my-element', class extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = ` <style> .container { border: solid 1px blue; padding: 5px; position: relative; &:after { content: "my-element"; display: block; position: absolute; bottom: -.5em; right: 5px; border: inherit; background-color: white; padding: inherit; } } /* style inserted/slotted part from inside */ [part="body"] ::slotted(div) { background-color: lightyellow; } </style> <div class="container"> <header part="header"><slot name="header"></slot></header> <hr> <div part="body"><slot name="body"></slot></div> </div> `; } }); </script></code></pre> </div> </div> <p></p> <p>其中 <pre><code>h1</code></pre> 的全局样式为红色，标有 <pre><code>part="header"</code></pre> 的元素从外部设置为绿色，插入 <pre><code>slot="body"</code></pre> 的内容从内部（shadow dom）设置为绿色有浅黄色背景。</p> <p>我不知道如何在 svelte 中执行任何这种（受控）跨界样式？（例如，当使用 <pre><code>AppShell::part(content)</code></pre> 时，我收到错误：</p> <pre><code>[plugin:vite-plugin-svelte] C:/srv/svelte/yoda5/src/routes/+layout.svelte:23:18 Expected a valid CSS identifier C:/srv/svelte/yoda5/src/routes/+layout.svelte:23:18 21 | 22 | <style> 23 | AppShell::part(content) { | ^ </code></pre> </question> <answer tick="false" vote="0"> <p>这里有关于<a href="https://learn.svelte.dev/tutorial/slots" rel="nofollow noreferrer">老虎机的课程</a>。最好参考该工具的文档。 Svelte 的学习网站非常棒。</p> <pre><code>// Slotted component, say Test.svelte. <div class="private-parent"> <slot /> </div> <style> div.private-parent { color: blue; } </style> </code></pre> <p>然后，您使用该组件：</p> <pre><code><script> import Test from './Test.svelte'; </script> <Test>  <p class="outside-style">Hello!</p> </Test> <style> p.outside-style { color: darkred; } </style> </code></pre> </answer> </body></html>

Google+按钮背后的逆向工程Javascript

我正在尝试模拟google+按钮。在LINK的部分代码中，它将会话ID转换为某种哈希值。我发现会话ID名称是SAPISID，转换后的哈希名称是SAPISIDH...

header标签中的外部异步脚本执行完成后如何执行脚本？

使用 Webflow 本机自定义代码编辑器，我按照他们的指示，在标签内添加了由 Finsweet 制作的外部脚本到我的网站。我想用 m 对页面进行一些更改...

何时切换搜索栏和徽标下降？

.navbar { 背景颜色：#F91F46； } .src-bar { 边框：0；边框半径：5px；概要：无；左内边距：15px；宽度：30vw； } .navbar { background-color: #F91F46; } .src-bar { border: 0; border-radius: 5px; outline: none; padding-left: 15px; width: 30vw; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js" integrity="sha512-WW8/jxkELe2CAiE4LvQfwm1rajOS8PHasCCx+knHG0gBHt8EXxS6T6tJRTGuDQVnluuAvMxWF4j8SNFDKceLFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <nav class="navbar navbar-expand-md fixed-top"> <div class="container-fluid"> <a class="navbar-brand ms-3" href="#"> <img src="img/Logo.avif" width="40px" class="d-inline-block" /> </a> <form role="search" class="search-bar"> <div class="input-group"> <input class="src-bar" type="search" placeholder="Search For Products" /> <button class="btn bg-white" type="submit"> <i class="fa fa-search"></i> </button> </div> </form> <div class="justify-content-end"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-colps" aria-controls="nav-colps" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="nav-colps"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li> <hr class="dropdown-divider" /> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </div> </nav> 切换时，我希望折叠 div 居中。我知道原因 - 我将折叠和切换 btn 放在 justify-end div 内，因为我需要切换 btn 位置位于右侧。现在，当切换时，我的折叠位于右侧，但我希望在切换时，折叠div到中心。当我删除 justify-end div 时，它位于左侧，但如果删除它，每个导航元素都会移动到 nav 和 md 视图中 lg 的左侧。看起来像这样或中心我们确实需要将 .nav-collapse 移到 justify-end 元素之外，才能在较窄的视口上获得所需的布局。要将菜单显示在右侧，请通过 flex-grow: 1 类将 .nav-collapse 应用于 flex-grow: 0 元素，覆盖 flex-grow-0 上的默认 .nav-collapse。为了使窄视口的链接元素居中，.navbar-nav中的元素采用垂直柔性布局，因此我们可以通过align-items: center类应用align-items-center： .navbar { background-color: #F91F46; } .src-bar { border: 0; border-radius: 5px; outline: none; padding-left: 15px; width: 30vw; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js" integrity="sha512-WW8/jxkELe2CAiE4LvQfwm1rajOS8PHasCCx+knHG0gBHt8EXxS6T6tJRTGuDQVnluuAvMxWF4j8SNFDKceLFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <nav class="navbar navbar-expand-md fixed-top"> <div class="container-fluid"> <a class="navbar-brand ms-3" href="#"> <img src="https://picsum.photos/40/40" width="40px" class="d-inline-block" /> </a> <form role="search" class="search-bar"> <div class="input-group"> <input class="src-bar" type="search" placeholder="Search For Products" /> <button class="btn bg-white" type="submit"> <i class="fa fa-search"></i> </button> </div> </form> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-colps" aria-controls="nav-colps" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse flex-grow-0" id="nav-colps"> <ul class="navbar-nav me-auto mb-2 mb-lg-0 align-items-center"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li> <hr class="dropdown-divider" /> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </nav> 您还可以考虑通过 text-align: center 类应用 text-center，将链接元素 text 居中： .navbar { background-color: #F91F46; } .src-bar { border: 0; border-radius: 5px; outline: none; padding-left: 15px; width: 30vw; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js" integrity="sha512-WW8/jxkELe2CAiE4LvQfwm1rajOS8PHasCCx+knHG0gBHt8EXxS6T6tJRTGuDQVnluuAvMxWF4j8SNFDKceLFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <nav class="navbar navbar-expand-md fixed-top"> <div class="container-fluid"> <a class="navbar-brand ms-3" href="#"> <img src="https://picsum.photos/40/40" width="40px" class="d-inline-block" /> </a> <form role="search" class="search-bar"> <div class="input-group"> <input class="src-bar" type="search" placeholder="Search For Products" /> <button class="btn bg-white" type="submit"> <i class="fa fa-search"></i> </button> </div> </form> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-colps" aria-controls="nav-colps" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse flex-grow-0" id="nav-colps"> <ul class="navbar-nav me-auto mb-2 mb-lg-0 text-center"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li> <hr class="dropdown-divider" /> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </nav>

分页时如何从 Okta 的 API List Users 中的响应标头获取 Next Link？

我正在尝试为其 API 端点列表用户实现 Okta 的分页。看起来为了分页，必须通过响应中的传入标头获取下一个链接。当执行...

node.js https 示例，错误，连接到本地主机的未知 SSL 协议错误

我使用这些链接中的简单示例： a 链接[a 如何在 Node.js 中创建 HTTPS 服务器？] a link[a 如何创建 https 服务器？ docs.nodejitsu.com] 但我收到类似的错误卷曲：(35) 未知 SSL

在 yocto 项目中集成我的 cmakelists 包时没有这样的文件或目录

我可以在 ubuntu 22.04 上使用 CMakeLists 成功编译并运行这个 gstreamer 插件：LINK 现在，我正在尝试将此包集成到我的 Yocto 项目中。所以我写了这个bb食谱：摘要=&...

tailwind 应用在 tailwind 版本 3 中不起作用

我已成功安装顺风。当涉及到使用@apply时，事情就不起作用了。我已经成功安装顺风了。当谈到使用@apply时，事情不起作用。 <body>  <header class="bg-transparent absolute top-0 left-0 w-full flex items-center z-10"> <div class="container"> <div class="flex items-center justify-between relative"> <div class="px-4"> <a href="#home" class="font-bold text-lg text-primary block py-6">shrlrmdh</a> </div> <div class="flex items-center px-4"> <button id="hamburger" name="hamburger" type="button" class="block absolute right-4"> <span class="hamburger-line"></span> <span class="hamburger-line"></span> <span class="hamburger-line"></span> </button> </div> </div> </div> </header> </body> 我想仅使用 @apply 指令创建一条线并旋转跨度这是我的 tailwind css 文件，我在其中放置了 @apply 指令 @tailwind base; @tailwind components; @tailwind utilities; .hamburger-line { @apply w-[30px] h-[2px] my-2 block bg-black; } .hamburger-active > span:nth-child(1) { @apply origin-top-left rotate-45; } .hamburger-active > span:nth-child(3) { @apply origin-bottom-left -rotate-45; } ''' I've tried many methods but @apply still doesn't work. 您需要使用 tailwind @layer 指令才能使 @apply 类正常工作。 @tailwind base; @tailwind components; @tailwind utilities; @layer components { .hamburger-line { @apply w-[30px] h-[2px] my-2 block bg-black; } .hamburger-active > span:nth-child(1) { @apply origin-top-left rotate-45; } .hamburger-active > span:nth-child(3) { @apply origin-bottom-left -rotate-45; } }

Angular tabView primeNG 路由

我正在尝试将路由添加到我的 tabView 但它不起作用，请问有什么建议吗？我尝试添加 routerLink="组件路径" 但没有运气这是 HTML 我正在尝试将路由添加到我的 tabView 但它不起作用，请问有什么建议吗？我尝试添加 routerLink="组件路径" 但没有运气这是html <p-tabView> <p-tabPanel header="Weather Data" routerLink="/weather-data"> <app-weather-data></app-weather-data> </p-tabPanel> <p-tabPanel header="Chart"> <app-chart></app-chart> </p-tabPanel> <p-tabPanel header="Heat index calculator" closable="true"> <app-heat-index></app-heat-index> </p-tabPanel> </p-tabView> 这是 module.ts import { RouterModule, Routes } from '@angular/router'; const appRoutes: Routes = [ { path: 'weather-data', component: WeatherDataComponent }, { path: 'chart', component: ChartComponent }, { path: 'heat-index', component: HeatIndexComponent }, ]; @NgModule({ declarations: [ AppComponent, WeatherDataComponent, ChartComponent, HeatIndexComponent, ], imports: [ BrowserModule, TabViewModule, ButtonModule, ChartModule, TableModule, HttpClientModule, InputNumberModule, FormsModule, SelectButtonModule, DropdownModule, BrowserAnimationsModule, FontAwesomeModule, InputSwitchModule, PaginatorModule, ReactiveFormsModule, RouterModule.forRoot(appRoutes), ], providers: [DatePipe], bootstrap: [AppComponent], }) export class AppModule {} 我找不到有关 tabView 组件的任何有关如何实现路由的文档，感谢任何帮助我按以下方式使用了 TabMenu 组件。 <p-tabMenu [model]="items"> </p-tabMenu> <router-outlet></router-outlet> MenuItem 类型有一个命令属性，在命令上您可以实现自定义操作，在您的情况下可以是路由。 this.items = [ { label: "Map", icon: "pi pi-fw pi-map", command: () => { this.router.navigate(["./map"]) }, }, ];

如何在React Prime DataTable中添加超链接？

我有一个数据表，我正在使用 React prime 库，我的要求是在一个特定列中添加一个链接。我有一个数据表，我正在使用 React prime 库，我的要求是在一个特定列中添加一个链接。 <DataTable paginator rows={tableRowPage} value={products} tableStyle={{ minWidth: "30rem" }} ><Column key={field} field={field} header={header} style={{ width: "25%" }} /> </DataTable> 我需要特定单元格中的超链接我在数据表中遇到了同样的问题，不幸的是，根据我的研究，他们似乎不提供对此的支持。但是，我已经设法通过这种方式解决了这个问题：数据表添加链接逻辑： <Column field="code" header="Code" body={(rowData) => { return ( <div sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", }} > <div style={{ color: "#3F00FF", textDecoration: "underline", cursor: "pointer", "&:hover": { color: "#23297A", }, }} onClick={() => window.open("www.google.com", "_blank").focus()} > {rowData.code} </div> </div> ); }} ></Column>; 我已经使用 Prime React Column 组件中的 body 渲染了数据。我应用 CSS 将其设置为链接样式，并添加了 onClick 事件以进行重定向。您可以根据您的要求修改逻辑。完整代码链接：https://codesandbox.io/s/primereact-demo-forked-kqtdvs?file=/src/App.jsx 如果您还有任何疑问，请告诉我。

如何在razor页面ASP.Net Core 8中的“a”标签后添加逗号

我试图在 foreach 中的“a”标签后面添加逗号（，），如下所示： @foreach（Model.Product.Categories 中的 var 项目） { 我试图在 foreach 中的“a”标签后面添加逗号（，），如下所示： @foreach (var item in Model.Product.Categories) { <a href="#" class="product-link product-cat-title">@item.Name</a> , } 但我收到错误消息“} Expected”。我该怎么办？我已经测试了@string.join(", ", Model.Categories.Select(p => p.Name).ToArray())，但这将返回字符串或文本。我要链接！值得一提的是，我不想添加其他标签，例如 <span> 或 <a>。我知道他们有效。如果有人能解释为什么它不起作用，我将不胜感激？谢谢 @foreach (var item in Model.Product.Categories) { <a href="#" class="product-link product-cat-title">@item.Name</a> <a >,</a> }

“拒绝应用 {link} 中的样式，因为其 MIME 类型不受支持且启用了严格的 MIME 检查。”在 Vue+Vuetify 应用程序中

我使用 vue-create-app 创建了一个 Vue+Vuetify 项目。在我的本地系统中，Vuetify 工作正常，但在 Gitlab 实时服务器上不起作用。并在实时应用程序中显示此错误消息： “拒绝应用...

如何使带有链接的按钮看起来像普通按钮？

如何使用 Tailwind CSS 实用程序类使部分粘性

在我的 Next.js Web 应用程序中，我有一个页面，如下所示：我想让该部分（用标签包裹）以蓝色粘性突出显示，这样当我滚动时，它会保持在原来的位置，并且只有 m... 在我的 Next.js Web 应用程序中，我有一个页面，如下所示：我想使该部分（包含在 <aside> 标签中）以蓝色粘性突出显示，这样当我滚动时，它会保持在原来的位置，并且只有主要部分（包含图表的部分）会滚动。这是 layout.tsx 文件： import { dashboardConfig } from "@/config/dashboard"; import { MainNav } from "@/components/nav/main-nav"; import { DashboardNav } from "@/components/nav/dashboard-nav"; interface DashboardLayoutProps { children?: React.ReactNode; } export default async function DashboardLayout({ children, }: DashboardLayoutProps) { return ( <div className="flex min-h-dvh flex-col relative"> <header className="container z-40 bg-background"> <MainNav /> </header> <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr] mt-32 mb-12 relative"> <aside className="hidden w-[200px] flex-col md:flex sticky top-0"> <DashboardNav items={dashboardConfig.sidebarNav} /> </aside> <main className="flex w-full flex-1 flex-col overflow-hidden"> {children} </main> </div> </div> ); } 请注意，我已将类 sticky 和 top-0 应用于我想要粘贴位置的部分。但它不起作用。我做错了什么？考虑通过 align-self: start 将 self-start 应用到粘性元素。默认情况下，它将具有 align-self: stretch，这将使其成为其父网格元素的完整高度，因此不会观察到粘性效果。通过应用 align-self: start，它的高度将仅与其内容一样高，如果存在垂直自由空间，则可以观察到粘性效果。 const dashboardConfig = { sidebarNav: '' }; const MainNav = () => 'MainNav'; const DashboardNav = () => 'DashboardNav'; function DashboardLayout({ children, }) { return ( <div className="flex min-h-dvh flex-col relative"> <header className="container z-40 bg-background"> <MainNav /> </header> <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr] mt-32 mb-12 relative"> <aside className="hidden w-[200px] flex-col md:flex sticky top-0 self-start"> <DashboardNav items={dashboardConfig.sidebarNav} /> </aside> <main className="flex w-full flex-1 flex-col overflow-hidden"> {children} </main> </div> </div> ); } function App() { return ( <DashboardLayout> <div class="h-[200vh]"></div> </DashboardLayout> ); } ReactDOM.createRoot(document.getElementById('app')).render(<App/>); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.tailwindcss.com/3.4.1"></script> <div id="app"></div>

即使 Spring Boot 项目的 html 页面上的路径正确，svg 文件也无法打开

我打算在我的 Spring Boot thymeleaf 项目中使用 Metronic html 登录页面，所以我更新了代码以导入资产。我打算在我的 Spring Boot thymeleaf 项目中使用 Metronic html 登录页面，所以我更新了代码以导入资产。 <link th:href="@{/uploads/assets/plugins/global/plugins.bundle.css}" rel="stylesheet" type="text/css" /> <link th:href="@{/uploads/assets/css/style.bundle.css}" rel="stylesheet" type="text/css" /> css 文件已加载并应用到页面上，但 svg 文件未打开。我只能将替代“徽标”视为文本。  <a href="/index.html" class="mb-7"> <img alt="Logo" th:src="@{/uploads/assets/media/logos/logo.svg}" /> </a> 如果我将 png 文件放在同一路径中，那么它就可以工作 <a href="/index.html" class="mb-7"> <img alt="Logo" th:src="@{/uploads/assets/media/logos/logo.png}" /> </a> 请帮我找出这个原因登录页面实际上有4个svg文件，但都打不开。关于我的项目主题 svg 文件有效

Bootstrap 5 中的选项卡未更改

我有一个引导选项卡区域，并使用 Javascript 在选项卡之间切换。 javascript 被调用但不会更改选项卡。 $('#tabList b...</desc> <question vote="0"> <p>我有一个引导选项卡区域，并使用 Javascript 在选项卡之间切换。 javascript 被调用但不会更改选项卡。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><script type="text/javascript"> $('#tabList button').click ( function (e) { e.preventDefault(); // bootstrap.Tab.getInstance(this).show() $(this).tab('show') } ); </script></code></pre> <pre><code><ul class="nav nav-tabs" id="tabList" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link" id="jobs-tab" data-bs-toggle="tab" data-bs-target="#jobs" type="button" role="tab" aria-controls="jobs" aria-selected="true">[tabHeaderJobs]</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link active" id="employees-tab" data-bs-toggle="tab" data-bs-target="#employees" type="button" role="tab" aria-controls="employees" aria-selected="false">[tabHeaderEmployees]</button> </li> </ul> <div class="tabContent" id="tabContent"> <div class="tab-pane fade" id="jobs" role="tabpanel" aria-labelledby="jobs-tab">[tabContentJobs]</div> <div class="tab-pane fade active show" id="employees" role="tabpanel" aria-labelledby="employees-tab">[tabContentEmployees]</div> </div></code></pre> </div> </div> <p></p> <p>´´´</p> <p>主选择器是 tabList 还是 tabContent ？</p> <p>那么我是否需要从按钮中选择切换名称，然后使用 <pre><code>($('#tabContent a[href="#toggleNameOfTab"]').tab('show')</code></pre> ？</p> </question> <answer tick="false" vote="0"> <p>根据您更新的代码，有几件事：</p> <ol> <li>无需选择<pre><code>#tabContent a</code></pre>。您的选项卡按钮已经具有 <pre><code>.nav-link</code></pre> 类，因此您可以将单击处理程序直接附加到这些按钮：</li> </ol> <pre><code>$('.nav-link').click(function() { $(this).tab('show'); }); </code></pre> <ol start="2"> <li>要以编程方式激活页面加载时的特定选项卡，您可以执行以下操作：</li> </ol> <pre><code>$('#employees-tab').tab('show'); </code></pre> <p>这将在加载时激活#employees-tab。</p> <p>需要了解的关键事项：</p> <ul> <li>使用 <pre><code>.nav-link</code></pre> 将点击处理程序附加到选项卡按钮</li> <li>使用 <pre><code>$(selector).tab('show')</code></pre> 以编程方式切换选项卡，其中 <pre><code>selector</code></pre> 是选项卡按钮的 ID 或元素</li> </ul> </answer> </body></html>

从 html 中提取 <h2> 标题文本，其中标题文本可能包含 <code> 和 </code> 标签

我有一个 html 文件，其中包含一些标签，例如一个<- ' 我有一个 html 文件，其中包含一些 <h2> 标签，例如 a <- '<section id="sec-standard-stoet-geary" class="level2" data-number="9.4"> <h2 data-number="9.4" class="anchored" data-anchor-id="sec-standard-stoet-geary"> <span class="header-section-number">9.4</span> Standardising PISA results</h2>' b <- '</span> <span class="fu">read_parquet</span>(<span class="st">"<folder>PISA_2015_student_subset.parquet"</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre> </div> </div> </section><section id="sec-leftjoin" class="level2" data-number="9.3"><h2 data-number="9.3" class="anchored" data-anchor-id="sec-leftjoin"> <span class="header-section-number">9.3</span> Linking data using <code>left_join</code> </h2> <p>' 我可以使用以下方法提取a的标题： str_extract_all(a, '(?<=(<[/]span>)).*(?=(<[/]h))')[[1]] %>% str_squish() > [1] "Standardising PISA results" 但是在 b 上尝试这个不会返回任何结果： str_extract_all(b, '(?<=(<[/]span>)).*(?=(<[/]h))')[[1]] %>% str_squish() > character(0) 编辑：从评论来看，这似乎是正则表达式无法解析换行符。我尝试在正则表达式(?s)中启用单行模式进行解析，但它仍然不起作用我会在这里使用 html 解析器而不是正则表达式： library(rvest) read_html(a) |> html_elements("h2") |> html_text() |> trimws() #> [1] "9.4 Standardising PISA results" read_html(b) |> html_elements("h2") |> html_text() |> trimws() #> [1] "9.3 Linking data using left_join"

如何让 MUI 的带有链接的按钮看起来像普通按钮？

我有一个按钮可以下载带有文件名的文件。为此，我写了这样的内容：我有一个按钮可以下载带有文件名的文件。为此，我写了这个： <Button color='primary' href=`/apiproxy/objects/${id}/subobjects` LinkComponent={React.forwardRef((props, ref) => <Link {...props} type='text/csv' download={`object_${id}_subobjects.csv`} ref={ref} />)} /> 生成的元素看起来与我的其他没有 href 属性的按钮相同（也带有 color='primary'），但悬停时其文本颜色更改为蓝色，与其他按钮不同，它保持白色。如何使其样式与其他按钮相同？我可以将 &:hover 文本颜色指定为白色，但是当主题更改其他按钮的文本颜色时，这会中断。有没有办法更改链接组件，使其样式与其他按钮相同，或者如果没有，按钮在调色板中使用什么作为悬停文本颜色，以便我可以将其设置为该颜色？我认为您可以使用 styledComponent 作为链接组件。就像下面... const theme = useTheme(); const StyledLink = styled(Link)(({ theme, color = "primary" }) => ({ ":hover": { color: theme.palette.secondary.main, }, })); <Button color="primary" href="/apiproxy/objects/1/subobjects" LinkComponent={React.forwardRef((props, ref) => ( <StyledLink {...props} type="text/csv" download={"object_1_subobjects.csv"} ref={ref} theme={theme} /> ))} /> 您可以在 theme.js 文件中的调色板中设置悬停颜色，并使用该颜色，如 theme.palette.${hoverColor} 请检查此测试组件。 https://codesandbox.io/p/sandbox/mui-28251-28335-forked-j2x8cd?file=%2Fsrc%2FApp.js 也许您可以让按钮将它们重定向到可以下载文件的 MediaFire： <a href="link-to-media"><button class="buttonClass">Download</button></a> 然后你可以将buttonClass修改为你喜欢的任何内容。

如何防止我的CSS规则被reactjs/jsx中的规范化CSS覆盖？

我有一个非常简单的反应组件类 UpgradeContainer 扩展组件 { 使成为（） { 返回（我有一个非常简单的反应组件 class UpgradeContainer extends Component { render() { return ( <div className={styles.msg}> <div className={styles['msg-container']}> <h3 className={`${styles.title} highlight-color`}> Big Header </h3> <div className={`${styles.description} alternate-color`}> Small text <br /> Some more small text </div> </div> </div> ); } 这是相关的css .title { font-size: 40px; line-height: 50px; color: white; } .description { text-align: center; font-size: 16px; padding: 20px 0 10px; color: white; } 这是上面组件的 DOM 输出此处以文本形式转载： <div class="mRMOZryRtlFUx_NHlt1WD" data-reactid=".0.1.0.0.0.1"> <h3 class="_2s6iXRZlq-nQwIsDADWnwU highlight-color" data-reactid=".0.1.0.0.0.1.0"> Big Header</h3> <div class="_1pFak-xR0a8YH6UtvoeloF alternate-color" data-reactid=".0.1.0.0.0.1.1"> <span data-reactid=".0.1.0.0.0.1.1.0">Small text</span> <br data-reactid=".0.1.0.0.0.1.1.1"> <span data-reactid=".0.1.0.0.0.1.1.2">Some more small text</span></div></div> 如你所见，reactjs 添加了几个 <span/> 来包裹小文本我希望标题文本 (Big Header) 比描述文本（small text 和 some more small text）大得多。输出看起来像这样：这是因为reactjs出于某种原因添加了一个span来包裹文本small text和some more small text（data-reactid“.0.1.0.0.0.1.1.0”和“.0.1.0.0.0.1.1.2”分别）当我检查样式时，我发现这些 span 元素的样式被以下 css 规则覆盖我真的很困惑，因为这些规则不是我自己定义的。所以我点击 <style>...</style>，它会将我带到我想知道如何有效地覆盖这些CSS规则？我想要的最终结果是：如果您使用“Normalize.css”！此问题的解决方案是将主 css 文件“style.css”保留在底部。至少低于normalize.css。如果您使用 Bootstrap，直接来自 Bootstrap 官方网站，“为了改进跨浏览器渲染，我们使用 Normalize.css，这是 Nicolas Gallagher 和 Jonathan Neal 的一个项目。” 这个问题的解决方案是将主 css 文件“style.css”保留在底部。至少低于 bootstrap.css。我遇到了与您类似的问题，我的解决方案是在 app.tsx 文件顶部导入 Bootstrap 样式。这样做的原因是它可以防止 Bootstrap CSS 被应用程序中的其他样式覆盖，它对我有用

从 html 中提取 <h2> 标题文本，其中标题文本可能包含换行符

如何将 XAML（或另一个 ContentView）作为子项传递给 ContentView

我正在尝试创建一个 ContentView，并在其中将子项作为 XAML 或（另一个内容视图）传递。我怎样才能做到这一点？例如。：我有一种观点说 Header.xaml 我正在尝试创建一个 ContentView，并在其中将子项作为 XAML 或（另一个内容视图）传递。我怎样才能做到这一点？例如：我有一种观点是 Header.xaml <?xml version="1.0" encoding="utf-8" ?> <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:strings="clr-namespace:Eurynote.Localization.Resources.en;assembly=Eurynote.Localization" x:Class="Eurynote.Core.Views.Common.EurynoteHeader"> <HorizontalStackLayout Spacing="10" VerticalOptions="Center"> <Image Source="brand_icon" WidthRequest="32" HeightRequest="30" /> <Label Text="Header" Margin="0,-3,0,0" /> </HorizontalStackLayout> </ContentView> 现在，在我的 MainPage.xaml 文件中，我可以将此视图称为 <common:Header /> 并且运行良好。但是我如何将另一个控件传递到与子项相同的内容视图，例如按钮、标签等...或任何其他 ContentView，如下面两个示例所示。 <common:Header> <Button Text="Button" /> </common:Header> <common:Header> <common:AnotherView /> </common:Header> 我想确保只能传递单个内容，如Frame。谢谢你！！！首先，如果使用以下代码，ContentView的内容将被Button覆盖。 <common:Header> <Button Text="Button" /> </common:Header> 因此您无法从 xaml 中为 contentview 添加子项。但你可以在后面的代码中做到这一点。如：在xaml中： <common:Header x:Name = "header"> 在页面的构造函数中： public partial class MainPage() { InitializeComponent(); var layout = head.Content as HorizontalStackLayout; layout.Children.Add(new Button(){ Text = "new button"}); } 您可以通过这种方式将新项目作为子项添加到内容视图中。

如何向React.js添加HTML组件轮播

App.html 轮播应用程序.html <!DOCTYPE html> <html> <head> <title>Carousel</title> <link rel="stylesheet" type="text/css" href="./css/materialize.min.css"> </link> <link rel="stylesheet" type="text/css" href="App.css"> </link> </head> <div class="carousel"> <div class="carousel-item"> <img src={require("./1.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./2.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./3.png")} class="responsive-img"></img> </div> <script src="./js/materialize.min.js"></script> <script> const small = document.querySelector('.carousel'); var inst = M.Carousel.init(small, {}); inst.dist(50); </script> </div> </html> 应用程序.js import React from 'react'; var perf = require('./App.html'); class App extends React.Component { render(){ return ( <div dangerouslySetInnerHTML={{ __html: perf }} ></div> ); } } export default App; 有人可以帮我解决如何在 JS 文件中添加 HTML 文件并通过 JS 文件运行 HTML 文件吗？我在 HTML 中使用 Materialize 制作了一个轮播，但我无法在 JS 中编写代码，因此，如果可能的话，有人可以帮助我将 HTML 文件转换为 JS 文件，或者如何导入 HTML 文件在我的 JS 文件中。您可以简单地将所有 html 代码插入 App.js 文件中，reactjs 不需要任何 .html 文件。请按照下面的代码进行操作，希望您能理解。我只是将所有 HTML 代码放入 App.js 的父 div 中。 import React from 'react'; var perf =require('./App.html'); class App extends React.Component { render(){ return ( <div> <div class="carousel"> <div class="carousel-item"> <img src={require("./1.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./2.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./3.png")} class="responsive-img"></img> </div> </div> </div> ); } } export default App; 只需使用react-create-app模板，基本的html（head，meta）东西已经就位，只需修改src目录即可满足您的需求。例如 index.js 会是这样的， import React from 'react'; import './App.css'; // For Your CSS file class App extends React.Component { render(){ return ( <div class="carousel"> <div class="carousel-item"> <img src={require("./1.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./2.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./3.png")} class="responsive-img"></img> </div> ); } } export default App; 如果您需要更改基础html，您可以在公共目录中进行操作。编辑：（对于依赖项）当您使用 materialize-css 时，您可以通过使用 materialize-css@next 和此 cmd npm 将 npm install materialize-css@next 安装为依赖项来使用它有关安装的更多信息可以在此处找到来源：https://materializecss.com/getting-started.html 我看到您对许多正在使用依赖项的答案做出了回应。如果这是通过 CDN 实现的，您只需将其添加到公共文件夹中的 index.html 文件中，并在需要时使用您的依赖项。不过，我认为 Materialise 有一个可以安装的节点方面。

ClosedXML 导出数据网格到 Excel 仅 10 行

我有一个包含 60 行数据的数据网格和一个将其导入 Excel 的按钮：我有一个包含 60 行数据的数据网格和一个将其导入 Excel 的按钮： <DataGrid AutoGenerateColumns="False" ItemsSource="{Binding Source}" CanUserAddRows="False" HeadersVisibility="All" Name="dgDisplay"> <DataGrid.Columns> <DataGridTextColumn Header="Day" Binding="{Binding Day}"/> <DataGridTextColumn Header="Data" Binding="{Binding Data}"/> </DataGrid.Columns> </DataGrid> <Button Command="{Binding SaveDataGridToExcelCommand}" CommandParameter="{Binding ElementName=dgDisplay}"/> 其中 Day 和 Data 只是一些随机生成的 int 数据。我的代码使用 ClosedXML 将数据从中导出到 Excel，它使用 MainWindowViewModel: ObservableObject 调用 MVVM.Toolkit。 [RelayCommand] public void SaveDataGridToExcel(DataGrid dataGrid) { DataTable dt = new DataTable(); foreach (DataGridColumn column in dataGrid.Columns) { dt.Columns.Add(column.Header.ToString()); } foreach (var item in dataGrid.Items) { DataRow dr = dt.NewRow(); bool rowHasData = false; for (int i = 0; i < dataGrid.Columns.Count; i++) { var cellContent = dataGrid.Columns[i].GetCellContent(item); if (cellContent is TextBlock textBlock) { //check if row empty, dont add this row.I add it on purpose to check //if the datagrid recognite the rest 50 rows not have data. It actually //dont save those data dr[i] = textBlock.Text; if (!string.IsNullOrEmpty(textBlock.Text)) { rowHasData = true; } } } if (rowHasData) { dt.Rows.Add(dr); } } SaveFileDialog saveFileDialog = new SaveFileDialog(); saveFileDialog.Filter = "Excel files (*.xlsx)|*.xlsx"; if (saveFileDialog.ShowDialog() == DialogResult.OK) { using (XLWorkbook wb = new XLWorkbook()) { wb.Worksheets.Add(dt, "Sheet1"); wb.SaveAs(saveFileDialog.FileName); } } } 但是保存的60行结果只显示了10行数据，其余50行都是空的。如果疑问为什么不使用Microsoft.Interop.Excel，那是因为该包不适合我的 Excel 版本。我没有在 ClosedXML 中看到任何对此有限制或许可的地方，所以我想知道为什么。如有任何帮助，我们将不胜感激。在浏览 github 几个小时后，我自己找到了答案。我没有访问单元格内容，而是直接从 DataGrid 的 ItemsSource 访问数据： public void SaveDataGridToExcel(DataGrid dataGrid) { DataTable dataTable = new DataTable(); foreach (DataGridColumn column in dataGrid.Columns) { dataTable.Columns.Add(column.Header.ToString()); } var itemsSource = dataGrid.ItemsSource as IEnumerable; if (itemsSource != null) { foreach (var item in itemsSource) { var properties = item.GetType().GetProperties(); var row = dataTable.NewRow(); foreach (var property in properties) { row[property.Name] = property.GetValue(item); } dataTable.Rows.Add(row); } } //show dialog... }

如何使用 Bootstrap 5 将嵌入水平居中

我正在尝试使用上面的图像进行集中输入。我按照位置文档进行操作，但不知何故图像没有水平集中：代码：我正在尝试使用上面的图像进行集中输入。我按照位置文档进行操作，但不知何故图像没有水平集中：代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Title</title>  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> </head> <body> <div class="container position-absolute top-50 start-50 translate-middle"> <embed class="logo" src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo"> <form action="/streams" method="POST"> <div class="input-group"> <input class="form-control border-danger border-5" type="text" aria-describedby="start-button"> <button class="btn btn-danger" type="submit" id="start-button">Click</button> </div> </form> </div> </body> </html> 我尝试手动执行此操作并使用 display flex，但没有成功。使用text-center链接 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Title</title>  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> </head> <body> <div class="container text-center"> <embed class="logo " src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo"> <form action="/streams" method="POST"> <div class="input-group"> <input class="form-control border-danger border-5" type="text" aria-describedby="start-button"> <button class="btn btn-danger" type="submit" id="start-button">Click</button> </div> </form> </div> </body> </html>

顺风未加载颜色

有简单的html：公共/index.html：有简单的html： public/index.html: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body class="text-red-600"> some text </body> css 是从 tailwindcss -i src/styles.css -o public/styles.css 获取的 src/styles.css: @tailwind base; @tailwind components; @tailwind utilities; tailwind.config.js: module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], } <body>标签中的红色不适用。默认的顺风类别是否导入到public/styles.css？ Tailwind 配置中的 public/index.html 文件似乎没有覆盖 content 文件。您必须确保使用 Tailwind 类的源代码文件被 content 文件 glob 覆盖，否则 Tailwind 将不会扫描这些文件，也不会为存在的类名生成 CSS 规则。考虑阅读有关配置的文档content。 module.exports = { content: [ "./src/**/*.{html,js}", "./public/index.html", ], theme: { extend: {}, }, plugins: [], }

仅滚动 div 的一部分，而不使用绝对位置和可变高度

HTML：一些文字 Lorem ipsum dolor sat amet，consectetur HTML： <div class="block"> <div class="header">Some text</div> <div class="content"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis. </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis. </p> </div> </div> CSS： .block { width: 800px; height: 200px; border: 1px solid red; overflow-y: auto; } .content { overflow-y: auto; } 我只想滚动“内容”，我无法设置标题部分的高度，因为它是动态的，所以我也不能使用绝对位置，有没有办法实现这一点？您可以将 <div class="header">Some text</div> 放在 <div class="block"> 之前。

在React语义ui列表元素中显示奇怪的字符而不是项目符号点

我正在使用react语义ui列表项目符号，但部署后项目符号点显示像奇怪的字符。我已经在 index.html 文件中包含以下代码我正在使用 React 语义 ui 列表项目符号，但部署后项目符号点显示像奇怪的字符。我已经在index.html文件中包含了以下代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="theme-color" content="#000000" /> 我也有这个问题，为什么它们只是偶尔出现，并且不可选，也不属于html？

如何捕获 React-Bootstrap 下拉列表的值？

我弄清楚了如何使用react-bootstrap来显示下拉列表：我想出了如何使用react-bootstrap来显示下拉列表： <DropdownButton bsStyle="success" title="Choose" onSelect={this.handleSelect} > <MenuItem key="1">Action</MenuItem> <MenuItem key="2">Another action</MenuItem> <MenuItem key="3">Something else here</MenuItem> </DropdownButton> 但是我该如何编写 onSelect 的处理程序来捕获正在选择的选项呢？我尝试了这个，但不知道里面写什么： handleSelect: function () { // what am I suppose to write in there to get the value? }, 还有，有没有办法设置默认选择的选项？ onSelect函数传递所选值 <DropdownButton title='Dropdowna' onSelect={function(evt){console.log(evt)}}> <MenuItem eventKey='abc'>Dropdown link</MenuItem> <MenuItem eventKey={['a', 'b']}>Dropdown link</MenuItem> </DropdownButton> 在这种情况下，如果您选择第一个选项，则会打印“abc”，在第二个选项中您可以看到也可以传入一个对象。所以在你的代码中 handleSelect: function (evt) { // what am I suppose to write in there to get the value? console.log(evt) }, 我不确定默认值是什么意思，因为这不是一个选择 - 按钮文本是标题属性中的任何内容。如果你想处理默认值，你可以在值为 null 时设置一个值。您忘记提及 eventKey 作为第二个参数传递，这是获取您单击的值的正确形式： handleSelect: function (evt,evtKey) { // what am I suppose to write in there to get the value? console.log(evtKey) }, 您可能需要针对您的情况使用 FormControl >> 选择组件： <FormControl componentClass="select" placeholder="select"> <option value="select">select</option> <option value="other">...</option> </FormControl> 您应该按如下方式更改handleSelect签名（在组件类中）： handleSelect = (evtKey, evt) => { // Get the selectedIndex in the evtKey variable } 要设置默认值，您需要使用 title 上的 DropdownButton 属性参考：https://react-bootstrap.github.io/components/dropdowns/

如何使用 Bootstrap 5 禁用自定义范围而不更改样式？

我有范围：我有范围： <!DOCTYPE html> <html lang="en"> <head>  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" /> </head> <body> <div class="container mb-4 col-sm-5"> <input type="range" class="custom-range" min="0" max="10" value="10" id="range-input" style="width: 100%"> </div> </body> </html> 我想禁用它（它应该仍然看起来一样，但用户不能再与它交互），但是不改变样式。例如：图中，顶部的启用，底部的禁用；我想禁用它，同时保持顶级范围的样式。我尝试手动重新创建原始样式，但没有成功： <!DOCTYPE html> <html lang="en"> <head>  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" /> <style> input[type=range]:disabled { background-color: blue; color: blue; background: blue; } </style> </head> <body> <div class="container mb-4 col-sm-5"> <input type="range" class="custom-range" min="0" max="10" value="10" id="range-input" style="width: 100%" disabled> </div> </body> </html> 除此之外，我在研究中找不到任何其他可能的解决方案。您实际上需要“如何”禁用它？设置 pointer-events: none 并添加 tabindex="-1"，你会得到一个看起来仍然相同的元素，但用户无法再与之交互（至少通过鼠标单击/点击，并且他们无法通过键盘将其聚焦）控制其中之一 - 不确定是否还有其他什么？）由于没有设置 name 属性，该字段不会成为表单提交数据集的一部分 - 如果在您的实际用例中有所不同，您也可以删除（并重新设置）名称，当您可以打开和关闭 tabindex。

link-header 相关问题

最新问题