grid 相关问题

Tailwind CSS 网格提供 3 行而不是 3 列，但仅适用于 grid-cols-6

我想在里面有1行3列。所以我在一个网格 div 中创建了 3 个 div，它有一个“grid-cols-3”类，但我得到了 3 个原始数据和 1 个列。 我想在里面有 1 行 3 列。所以我在一个网格 div 中创建了 3 个 div，它有一个“grid-cols-3”类，但我得到了 3 个原始数据和 1 个列。 <div class="grid grid-cols-3"> <div> Col 1 </div> <div> Col 2 </div> <div> Col 3 </div> </div> 然后我得到了 但是当我将“grid-col-3”更改为“grid-col-6”时，它起作用了！ <div class="grid grid-cols-6"> <div> Col 1 </div> <div> Col 2 </div> <div> Col 3 </div> </div> 然后我得到了 我是自学成才，没有什么好的导师。我知道如何使用像“grid-template”这样的 CSS 来做到这一点，但我使用 Tailwind 来更快地使用 Laravel 和 Livewire 进行部署。 如果您在 Tailwind Play 中测试代码，您会发现它工作正常（如预期），因此可能有一些 CSS 覆盖此类：grid-cols-3。你应该检查一下。 但是我对 Laravel Livewire 也有类似的问题我检查了内置的 css 文件，我注意到定义了这个类：.md\:grid-cols-3所以在我的例子中这解决了： <div class="grid md:grid-cols-3"> <div> Col 1 </div> <div> Col 2 </div> <div> Col 3 </div> </div> 我正在使用 Laravel Breeze 并遇到了同样的问题。 grid-col-1、grid-col-2、grid-col-4 有效，但 grid-col-3 无效。 如果通过运行 npm run dev 重新生成 CSS，它就可以工作。 Tailwind 使用了一个名为 purgecss 的插件，所以我认为这就是原因。非常令人沮丧的错误定位 我在 next.js/tailwind 中遇到同样的问题 @paddys_1 答案给了我正确的提示。我通过添加解决了这个问题 <div className='grid grid-cols-3 hidden'><div>1</div><div>2</div><div>3</div></div> 正文标签中的某处。

我想在反应时模糊我的背景图像网格，但是当我在背景图像上使用过滤器时，一切都变得模糊，并且我使用makeStyles

我在reac上有一张“卡”，卡内有一些组件，我想在卡上的背景上放置一些图像，并且我想模糊背景上的这个图像，但是当我使用filtere.. .

Qtable索引越界

我正在尝试在 gms2 中制作一个简单的 Q-learning AI，但是当我尝试更新 qTable 时，我会遇到同样的问题： 索引越界 项目很简单，AI ...

我只想模糊网格的背景，但它完全专注于使用 MakeStyles 的 React

我有一个页面，里面有我的课程信息，我想添加一些模糊的背景，但是当我添加这个模糊时，我的所有网格都会变得模糊，我可以看到任何东西，我如何才能只在上面添加模糊我的

CSS 网格内奇怪的不需要的溢出

我正在尝试制作一个网格，其中图像输入字段是一个长宽比为 1:1 的大正方形。我需要字段高度与网格中的其他输入字段对齐。所以第二个网格...

在ReactJS中使用动画在网格上添加列

我正在尝试在 antd 中的行上添加一列后添加动画， 这是我的代码 从 'react' 导入 React, { useState }; 从'antd'导入{列，行}； 常量页面 = () => { 常量 [

有什么方法可以让容器的内容及其滚动条不碰到容器自己的背景图像的边缘？

我正在开发一个网站的一页，该页面的中心仅包含两个垂直对齐的容器。目前，post 元素的内容及其滚动条与边框重叠...

一个网格中的标签与另一个网格中的值重叠

目前我有一个如下所示的 XML： 目前我有一个如下所示的 XML： <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="redacted" xmlns:templates="redacted" x:Class="redacted"> <ContentPage.Resources> <DataTemplate x:Key="labelTemplate"> <ViewCell> <Grid> <Label Text="{Binding Text}" /> </Grid> </ViewCell> </DataTemplate> <DataTemplate x:Key="buttonTemplate"> <ViewCell> <Grid> <Button Text="{Binding Text}" Clicked="UniversalButtonInterface_Clicked" /> </Grid> </ViewCell> </DataTemplate> <templates:StepItemTemplateSelector x:Key="stepSelectorTemplate" LabelTemplate="{StaticResource labelTemplate}" ButtonTemplate="{StaticResource buttonTemplate}" /> </ContentPage.Resources> <Grid> <StackLayout> <ListView ItemsSource="{Binding Steps}" ItemTemplate="{StaticResource stepSelectorTemplate}"> </ListView> </StackLayout> <local:CameraButton/> </Grid> </ContentPage> 问题是，如果标签较长，它会与第二个网格中的按钮重叠，并且我无法让该网格扩展其高度。我尝试扩展行定义，但高度基本保持不变，并且它仍然与第二个网格重叠，就好像它根本不想移动一样。如果我尝试应用边距/填充，操作将在网格高度的限制内，并且文本/按钮将被截断。 问题示例： 如何确保网格行的高度与标签缩放而不重叠？ 默认情况下，ListView 中所有 ViewCell 的高度相同，如果只想调整 Label ViewCell 的高度，可以先将 ListView 的 HasUnevenRows 属性设置为 True： <ListView HasUnevenRows="True" ItemsSource="{Binding Steps}" ItemTemplate="{StaticResource stepSelectorTemplate}"> </ListView> 然后为ViewCell和Label设置合适的高度： <DataTemplate x:Key="labelTemplate"> <ViewCell Height="xxx"> <Grid> <Label Text="{Binding Text}" HeightRequest="xxx"/> </Grid> </ViewCell> </DataTemplate> 这是因为ListView中的HasUnevenRows属性控制是否可以设置单个viewcell的大小，更具体的解释可以参考Size items

将元素居中至全宽，左侧有一个元素

我正在尝试左对齐一个元素（按钮）并将另一个元素（徽标）在整个宽度上居中。中心的标志总是向右移动一点。在桌面上，我必须向

如何用Python制作颜色网格？

我正在尝试创建代表颜色混合比例的值网格。我在图中提供了一个示例。我面临的挑战是对角线下方和上方的颜色应该是

yii2 在 gridview 中更改控制器操作

我有 ItemController 并在 actionView 中放置了 Itempicture 的 gridview，我希望当我单击图标视图时，更新和删除，然后转到 ItempictureController。 那么如何更改控制器活动...

引导CSS网格

我正在尝试设置一个简单的示例，使用引导CSS的网格功能，并有一个index.html文件，该文件的容器有两行，每行有两列。但不是col...

如何在 R 中使用网格组合 grobs 以创建闭合形状？

我目前正在编写 ggplot2 扩展，在此过程中我尝试使用网格创建一个填充形状，其中某些边由函数 grobs 定义。我不确定如何获取一棵树...

如何将Bootstrap卡片在网站上以均匀间距居中？

我正在使用 Bootstrap 开发 React 应用程序，我面临着让 Bootstrap 卡在我的网站上以均匀间距居中的挑战。一个ro中的三张卡片之间的空间...

我有一个用 *ngFor 创建的角度网格。我在行内放置了一个自动完成功能，但我在建模时遇到了麻烦

`我知道 [(ngModel)]="selected" 对于所有导致问题的行， 我需要一些解决方法来解决并在此处选择输入图像描述时保留每行中的单个项目。 目前...

用网格将图像居中

我一直在努力开发一个网站，其中包含标题和正文中的图像。然而，我在尝试将图像置于身体部分的中心时遇到了挑战。图片

如何结合GridSplitter和DataGrid，其中DataGrid必须有垂直滚动条？

我有一个 xaml，或多或少看起来如下（我已经过滤了 Grid 和 RowDefinition 相关条目以显示 Grid、DataGrid 和 RowDefinition 条目： 我有一个 xaml，或多或少看起来如下（我过滤了 Grid 和 RowDefinition 相关条目以显示 Grid、DataGrid 和 RowDefinition 条目： <Grid x:Name="MainGrid"> <Grid.RowDefinitions> <RowDefinition Height="auto" MaxHeight="60"/> <RowDefinition /> </Grid.RowDefinitions> <Grid x:Name="Grd_Header" Grid.Row ="0" MaxHeight="60"> <Grid.RowDefinitions> <RowDefinition Height="0"></RowDefinition> <RowDefinition Height="Auto"></RowDefinition> <RowDefinition Height="Auto"></RowDefinition> <RowDefinition Height="10"></RowDefinition> </Grid.RowDefinitions> </Grid> <Grid x:Name="Grd_Data" Grid.Row="1"> <Grid.RowDefinitions> <RowDefinition Height="auto"></RowDefinition> <RowDefinition Height="10"></RowDefinition> <RowDefinition Height="*"></RowDefinition> </Grid.RowDefinitions> <Grid x:Name="Grd_Act" Grid.Row="0" VerticalAlignment="Stretch"> <Grid.RowDefinitions> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="*"></RowDefinition> </Grid.RowDefinitions> <DataGrid Name="..." Grid.Row="1" Grid.Column="0"> <telerik:RadBusyIndicator Grid.Row="0" Grid.RowSpan="2" .../> </Grid> <GridSplitter Grid.Row="1" Height="3" Background="black" HorizontalAlignment="Stretch" /> <Grid x:Name="Grd_plan" Grid.Row="2"> <Grid.RowDefinitions> <RowDefinition Height="auto"></RowDefinition> <RowDefinition Height="*" MinHeight="50"></RowDefinition> <RowDefinition Height="*"></RowDefinition> </Grid.RowDefinitions> <TextBlock Text="planned..." Grid.Row="0" Grid.Column="0"/> <DataGrid Grid.Row="1" ...> <telerik:RadBusyIndicator Grid.RowSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BusyContent="Loading pallets" IsBusy="{Binding IsLoadingGepandeMatrijsPalletten}" Grid.ColumnSpan="2"/> </Grid> </Grid> </Grid> 乍一看，结果看起来或多或少还不错： 但是从我稍微移动 GridSplitter 的那一刻起，它就出现了部分错误：有一个滚动条（绿色），它必须保持存在。但是灰色空间（红色矩形中）：它来自哪里？ （在调试时，我了解到灰色区域属于一般视图或Grid，称为MainGrid。） 在我忘记之前：Grid.Resources包含不同的Style标签，就像DataGrid的这个标签： <Style TargetType="DataGrid"> <Setter Property="HorizontalAlignment" Value="Stretch"/> <Setter Property="VerticalAlignment" Value="Stretch"/> <Setter Property="AutoGenerateColumns" Value="False"/> <Setter Property="IsReadOnly" Value="True"/> <Setter Property="ColumnWidth" Value="Auto"/> <Setter Property="FontSize" Value="12"/> </Style> 我假设 Grid 元素 “Grd_Act” 和 “Grd_plan” 都在干扰布局。 它们的布局不正确，元素排列不整齐（冗余属性、错误值等）。 修复这些布局问题应该会恢复预期的调整大小行为（由 GridSplitter 触发）。 “Grd_Act” 这个Grid有一个非常奇怪的布局，其中为two元素定义了三行（为什么不是两行？）。 元素的排列也是错误的： RadBusyIndicator 放置在第一行并跨越两行。 DataGrid 放置在第二行，第二行也被跨越 RadBusyIndicator 占据 - 它们重叠。 最后一行是空的，但保留完整的空间/高度（星号大小）。这条线本质上导致了奇怪的调整大小行为。但这样的安排还是错误的。 只需将其设置为两行，每个元素一行： <Grid x:Name="Grd_Act" Grid.Row="0"> <Grid.RowDefinitions> <RowDefinition Height="30" /> <!-- Busy indicator row --> <RowDefinition Height="*" /> <!-- DataGrid row --> </Grid.RowDefinitions> <telerik:RadBusyIndicator Grid.Row="0" .../> <DataGrid Name="..." Grid.Row="1" /> </Grid> “Grd_plan” 这个Grid正确定义了三行，每个元素一行。 但是，元素排列不正确： RadBusyIndicator 与 TextBlock 一起放置在第一行（重叠）。 RadBusyIndicator 的 Grid.RowSpan 属性设置为 2，这没有任何意义（拼写错误？）。相反，该元素必须放置在第三行。 没有定义列，但元素按列排列：TextBlock 显式放置在 0 列中，并且 RadBusyIndicator 跨越两列。您应该删除那些多余的 Grid.Column 和 Grid.ColumnSpan 值。 不要使用 GridRowSpan 除非你的元素按列排列或者你想创建覆盖（使用 z-index）。 <Grid x:Name="Grd_plan" Grid.Row="2"> <Grid.RowDefinitions> <RowDefinition Height="auto" /> <!-- TextBlock row --> <RowDefinition Height="*" MinHeight="50" /> <!-- DataGrid row --> <RowDefinition Height="*" /> <!-- RadBusyIndicator row --> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Text="planned..." /> <DataGrid Grid.Row="1" ...> <telerik:RadBusyIndicator Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BusyContent="Loading pallets" IsBusy="{Binding IsLoadingGepandeMatrijsPalletten}" /> </Grid> 如果您想让繁忙指示器覆盖 DataGrid，只需将它们放在同一行并设置 Panel.ZIndex 属性来控制它们的渲染顺序（z-index）。不需要（或合理）行跨度。

将数学表达式放入gridExtra表格列标题中

我想输入以下表达式： 2<= x<3, but if I put c(paste0(2 ," <= x <", 3), the result is the one in image 1, which I don't like. On the other hand , if I put c(...

在网格攻击级别 77 中使用 CSS 网格将红色字段放入红色边框

我在《编码幻想：网格攻击》77 级卡了好几个小时。我尝试了一切，但到目前为止没有任何效果。游戏没有提供任何解决方案，而且我无法跳过该关卡。有谁知道解决办法吗

网格风格产品卡

我正在使用 React，我想创建一个如图所示的产品卡 我使用地图来适应数据现在的样式，这是我遇到问题的地方，因为我使用了显示网格，这是代码 &...