css - Bootstrap 4 : Equal width columns using grid-6ren

css - Bootstrap 4 : Equal width columns using grid

转载作者：太空宇宙更新时间：2023-11-04 07:22:16

我正在尝试使用 Bootstrap 网格使容器的布局具有一行和其下方的 Accordion 具有相等宽度的列。问题在于将 Accordion 中的数据与最顶行对齐。

我对 bootstrap 4 的理解是 col 类应该自动调整每列的大小，所以我认为无论内容如何，所有 8 列的宽度都是相同的。

顶部看起来不错，但下面的行被压缩了。这是一个例子:

下面是我的 Razor 页面:

<body>
<div class="container">
    <div class="row">
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].Item)
        </div>
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].ItemDescription)
        </div>
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].CorpCustomer)
        </div>
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].UoM)
        </div>
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].SummedOrder)
        </div>
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].SummedForecast)
        </div>
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].Difference)
        </div>
        <div class="col">
            @Html.DisplayNameFor(model => model.ReportHighLevel[0].Week)
        </div>
    </div>
</div>

<div class="container">
    <div id="accordion">
        @{int counter = 0; }
        @foreach (var dataVM in Model.CollapseReport)
        {
            <div class="card">
                <div class="card-header" id="heading@(counter)">
                    <h5 class="mb-0">
                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapse@(counter)" aria-expanded="true" aria-controls="collapse@(counter)">

                            <div class="row">
                                <div class="col">
                                    @dataVM.Summary.Item
                                </div>
                                <div class="col">
                                    @dataVM.Summary.ItemDescription
                                </div>
                                <div class="col">
                                    @dataVM.Summary.CorpCustomer
                                </div>
                                <div class="col">
                                    @dataVM.Summary.UoM
                                </div>
                                <div class="col">
                                    @dataVM.Summary.SummedOrder
                                </div>
                                <div class="col">
                                    @dataVM.Summary.SummedForecast
                                </div>
                                <div class="col">
                                    @dataVM.Summary.Difference
                                </div>
                                <div class="col">
                                    @dataVM.Summary.Week
                                </div>
                                </div>
                        </button>
                    </h5>
                </div>

                <div id="collapse@(counter)" class="collapse" aria-labelledby="heading@(counter)" data-parent="#accordion">
                    <div class="card-body">
                        <form method="post">
                            <input type="hidden" name="var1" value="@dataVM.Summary.CorpCustomer" />
                            <input type="hidden" name="var2" value="@dataVM.Summary.Item" />
                            <input type="submit" class="btn btn-default" value="Add to Log" asp-page-handler="AddLog" asp-route-data="@dataVM.Summary.CorpCustomer, @dataVM.Summary.Item)" />
                        </form>
                        <div class="container">
                                    @foreach (var item in dataVM.WeeksOfData)
                                {
                                        <div class="row">
                                            <div class="col">
                                                @item.Item
                                            </div>
                                            <div class="col">
                                                @item.ItemDescription
                                            </div>
                                            <div class="col">
                                                @item.CorpCustomer
                                            </div>
                                            <div class="col">
                                                @item.UoM
                                            </div>
                                            <div class="col">
                                                @item.SummedOrder
                                            </div>
                                            <div class="col">
                                                @item.SummedForecast
                                            </div>
                                            <div class="col">
                                                @item.Difference
                                            </div>
                                            <div class="col">
                                                @item.Week
                                            </div>
                                        </div>
                            }
                                </div>
                    </div>
                </div>
            </div>
            counter++;
        }
    </div>
</div>

最佳答案

原因是你的btn btn-link嵌套在 <h5> 中的按钮. .btn Bootstrap 中的类具有样式 display: inline-block; , 它不占用 100% 的宽度。

即使你设置了width: 100%;在按钮上，您的列仍然不会对齐，因为:

.btn样式为 white-space: nowrap;因此可折叠标题内的文本不会换行，而可折叠正文内的文本会换行。
.btn类有 .75rem 左右填充，这将占用整个行宽。
您的可折叠体内有一个嵌套容器。容器左右各有 15 像素的内边距，这也将占据整个行宽。

提示:您可能需要考虑不同的设计/布局。

例如去掉嵌套在标题中的按钮，使用anchor istead:

<div class="container">
    @for (int i = 0; i < 5; i++)
    {
        <div class="card">
            <div class="card-header">
                <a href="#" data-toggle="collapse" data-target="#collapse@(i)">
                    <div class="row">
                        <div class="col">Item</div>
                        <div class="col">Item Description</div>
                        <div class="col">Corp Customer</div>
                        <div class="col">UoM</div>
                        <div class="col">Summed Order</div>
                        <div class="col">Summed Forecase</div>
                        <div class="col">Difference</div>
                        <div class="col">Week</div>
                    </div>
                </a>
            </div>
            <div id="collapse@(i)" class="collapse">
                <div class="card-body">
                    <div class="row">
                        <div class="col">Item</div>
                        <div class="col">Item Description</div>
                        <div class="col">Corp Customer</div>
                        <div class="col">UoM</div>
                        <div class="col">Summed Order</div>
                        <div class="col">Summed Forecase</div>
                        <div class="col">Difference</div>
                        <div class="col">Week</div>
                    </div>
                    <div class="row">
                        <div class="col">Item</div>
                        <div class="col">Item Description</div>
                        <div class="col">Corp Customer</div>
                        <div class="col">UoM</div>
                        <div class="col">Summed Order</div>
                        <div class="col">Summed Forecase</div>
                        <div class="col">Difference</div>
                        <div class="col">Week</div>
                    </div>
                    <div class="row">
                        <div class="col">Item</div>
                        <div class="col">Item Description</div>
                        <div class="col">Corp Customer</div>
                        <div class="col">UoM</div>
                        <div class="col">Summed Order</div>
                        <div class="col">Summed Forecase</div>
                        <div class="col">Difference</div>
                        <div class="col">Week</div>
                    </div>
                </div>
            </div>
        </div>
    }
</div>

截图:

关于css - Bootstrap 4 : Equal width columns using grid，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50160709/

文章推荐： java - 使用java删除单行SQL注释

文章推荐： python - 在Python中读取文件进入无限循环

文章推荐： python - 将字符串中的字符与二进制列表匹配

文章推荐： Java:如何在子类中设置颜色？

html - max-width of 100px 和 width of 100px ，为什么 max-width 比 width 短？
我想了解这两者的区别谢谢最大宽度:100px 宽度:100px body{ max-width: 1080px; width: 1080px; backgrou
javascript - jQuery .width()、style.width 和 jQuery .css ('width' 之间有什么区别？
jQuery 的 .width()、jQuery 的 .css('width') 和 .style 返回的值有什么区别.width 节点上的属性？我很好奇，因为在尝试将两个表格单元格的宽度设置为相等
php - 可以使用 width=device-width 和元名称 ="viewport"内容 ="width=1024"吗？
我可以在 wordpress 的 header php 中添加两个视口(viewport): 和我希望能够使用 viewport width 1024 显示everything，除非您是低于 x
reactjs - 无法读取未定义的属性 'width' (style.width)
好的，所以我得到了 ImageBackground 的以下组件(使用 typescript ，但应该是不言自明的)。 (这是 react 原生的) import * as React from "re
javascript - .offsetWidth、.width、.width() 等并不总是在自动调整大小的元素上正确返回
我正在尝试根据 div 中包含的图像的宽度调整其大小，但没有任何 JS 方法可以一致地工作来获取图像的宽度。 label here img { width: auto
jquery - .width() 给出错误 $(...)[0].width 不是函数？
我有一个表，我试图找到表中每个 td 的宽度。我尝试了各种变体:$("td")[0].width()，但它们都不起作用，收到错误:"Uncaught TypeError: $ (...)[0].wid
html - min-width 和 width 并存
我在使 rem 中的 min-width 与百分比宽度共存时遇到了一些问题。 When resizing this jsfiddle the outer right block is going un
css - 有没有办法让浏览器在设备模式下减少 "width"以及 "device-width"
当我在 chrome(以及 Edge/Brave/Opera)的设备模式下测试页面时，设备宽度属性似乎减少了，但宽度属性没有重新创建: html {
html - 依次放置几个div width full width 并调整图像背景的宽度和高度
我想依次显示 div #botone、#bottwo 和 #bottree。我还希望在 #botone div 上按 100% 宽度和比例高度调整背景图像。现在最后两个 Div 显示在 #boton
javascript - width 和 style.width 接受什么数据类型？
我是第一次学习 JavaScript 的学生，我有一个学校问题，我们需要指出 width 和 style.width 接受的数据类型。我知道数据类型有数字、字符串、空值、未定义、 bool 值和对象
html - Screen.width/$(window).width() 媒体查询
所以看起来在移动设备中媒体查询使用 screen.width 根本没有改变。但是在我的桌面上，当我更改窗口大小时，screen.width 保持不变，$(window).width() 发生变化，并且
javascript - Jquery width $(el).width() 似乎在这里失败
http://jsfiddle.net/3BFGU/27/ 有谁知道为什么包含文本“ABC”的跨度的宽度返回 0。 1) 仅在 Firefox 中发生。2)如果我删除两者之间的跨度，它工作正常。 (h
javascript - canvas.width=canvas.width 在内部是如何工作的？
我知道下面的代码清除了 Canvas canvas.width = canvas.width 但这在内部是如何工作的呢？赋值运算符只是将一些值赋给变量，但是上面的代码如何清除 Canvas ？根据
html - max-width 不打断单个单词，超过max-width
当使用 max-width 时，为什么它不会“破坏”超过允许长度的单词，我该如何让它工作？ JSFiddle function input() { var inputText = document
html - 在移动设备上， 'width=device-width' 字体大小的最佳实践？
在移动网站上，在利用 width=device-width 视口(viewport)设置的同时调整文本大小的最佳方式是什么？最佳答案样式百分比如何？比如 100% 或 90%。关于html -
WPF 工具包数据网格 : how to get ColumnHeader width to be the same as GridColumn width
对于我的 WPF Toolkit DataGrid，我使用以下自定义列标题样式:
css - min-width 和 max-width 具有相同的值？
过去，我看到下一个 css，我在想两者之间是否存在一些实际差异 min-width: 90px; max-width: 90px; 和 width: 90px; 最佳答案使用 width 将简单地在
r - Knitr 忽略 width 和 out.width 选项
我有一个 R Markdown，我从 RStudio 中将其编织为 html。我可以使用 fig.width 和 fig.height 来调整我的绘图的分辨率，但我似乎无法加宽页面输出，以便文本输出不
jquery-mobile - 水平滚动失败，width=device-width iscroll
此处的示例代码:http://pastebin.com/95z3pftQ 我正在尝试构建一个带有固定标题和“内容”部分的移动页面，该部分将填充外部(经过清理，但在其他方面是任意的)HTML。我需要使用
安卓 : is a width of 160dp equals to 100% of the screen width?
这里是 dp 单位的定义:(如果它是正确的...) 密度无关像素 - 一种基于屏幕物理密度的抽象单位。这些单位是相对于 160 dpi 屏幕而言的，因此 1 dp 是 160 dpi 屏幕上的一个像素

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - Bootstrap 4 : Equal width columns using grid