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:如何在子类中设置颜色？

Sitecore - "is equal to"、 "is case-insensitively equal to"和 "is not case-insensitively equal to"之间有什么不同？
在 Sitecore 中，我尝试在线路管理器中创建分段列表。但是，当我选择条件时，我对“等于”、“不区分大小写等于”和“不不区分大小写等于”感到非常困惑？谁能给我解释一下其中的区别吗？谢谢! 最佳
c# - Char.Equals 与 Object.Equals——ReSharper 建议我应该使用 Object.Equals。我是不是该？
基本上，我想知道在这种情况下我是否应该听 ReSharper... 您认为与字符进行比较应该使用 Char.Equals(char)，因为它可以避免拆箱，但 Resharper 建议使用 Object
java - 传递关系 : What is x. equals(z) 当 x.equals(y) 为假且 y.equals(z) 为真时
假设 equals() 是可传递的；我知道如果 x 和 y 有平等的双边协议(protocol)，那么其中一个，比如 y，不会单独与第三类 z 签订协议(protocol)。但是如果我们遇到 x.e
haskell - “replace equals by equals” 是什么意思
我是 Haskell 新手，正在阅读: http://www.seas.upenn.edu/~cis194/spring13/lectures/01-intro.html 它指出“在 Haskell
c# - Equals() 与静态 string.Equals()
阅读有关 C# 中的字符串比较的文章，我发现有很多方法可以比较 2 个字符串以查看它们是否相等。我习惯了来自 C++ 的 == 但我了解到，如果你将一个对象与一个字符串进行比较，那么 == 默认为引
java - 在包含被覆盖的 equals() 的类的子类中覆盖 equals()
我有一个 Point 类和一个 MinesweeperSquare 类，后者是前者的子类。如果我重写后者的 equals 方法，就像这样: if (!(obj instanceof Minesweep
c++ - 检查: equal to or not equal to?有什么效率
我想知道，如果我们有 if-else 条件，那么检查什么在计算上更有效:使用等于运算符或不等于给运营商？有什么区别吗？例如，以下哪一项在计算上是高效的，下面的两种情况都会做同样的事情，但哪一种更好(
C# 执行速度 : equal (==) vs not equal (! =)
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
java - Annotation.equals() 与 Object.equals()
某些框架(例如 guice )在某些情况下需要创建注解接口(interface)的实现类 . 好像有一个区别 Annotation.equals(Object) 之间和 Object.equals(
.net - 谜语: When are three equal dates not equal
从三个变量开始，都是System.DateTime。 a: 10/2/2009 2:30:00 PM b: 10/2/2009 2:30:00 PM c: 10/2/2009 2:30:00 PM 相
.net - IEnumerable.Equals 似乎调用了错误的 Equals 方法
我实现了一个 PagedModel 类来包装 IEnumerable，为我的 MVC 应用程序中的网格提供分页数据。我使用 Resharper 自动生成的 Equality 代码告诉它检查数据、总行数
java - 为什么 equals 不使用强制转换的 equals 方法？
正如问题所述。理想情况下，答案应该是 false，因为它将使用 Object#equal，这只是引用比较。 String cat = new String("cat"); String
c# - 算法效率 : Should I use Equal (==) or Not Equal (! =) 运算符？
我想知道以下两个选项中哪一个在速度方面最有效。它们之间可能只有很小的区别(或者根本没有区别？)但是由于我每天使用该代码片段 30 次，所以我想知道这里的“最佳实践”是什么 :) 选项 1: if (s
java - 在派生类中调用 super.equals() 同时重写 equals
我有一个以年龄和姓名作为实例成员的基类，以及带有奖金的派生类。我在派生类中重写 equals 。我知道 Java 中只有一个基类时 equals 是如何工作的。但我无法理解继承的情况下它是如何工作的。
javascript 对象比较 : equal vs strict equal
==之间的区别和 ===是前者仅检查值(1 == "1" 将返回 true)，后者是否检查值并另外检查类型(1 === "1" 将返回 false，因为 number 不是字符串)。比较对象意味着比
Java:使用 toString().equals() 与 equals()
这是一个理论问题。我有一个我自己设计的对象，其中包含一堆变量、方法等。我覆盖了 toString 方法，主要用于记录目的，以返回变量的值。在我看来，比较此对象实例的最简单和最直接的方法是比较从 toS
Java equals()方法—— 'semantics of equals in subclasses'如何判断getClass和instanceof的使用
我是 Java 编程的初学者。目前我正在 this 阅读关于继承和 equals 方法的内容。页。到目前为止，我理解解释: Compare the classes of this and otherO
java - 将 .equals() 替换为 Objects.equals()
当 IntelliJ 建议我更正以下内容时，我正在编写代码: objectOne.equals(objectTwo); 告诉我方法调用 equals 可能会产生旧的 java.lang.NullPoi
java - Objects.equals 和 Object.equals
我尝试创建一个允许在 Java 中使用类似元组的结构的元组类。元组中两个元素的一般类型分别是 X 和 Y。我尝试为此类覆盖正确的等号。事情是，我知道 Object.equals 属于默认值，它仍然根
【C++ STL基础入门教程】C++ equal(STL equal)比较算法详解
可以用和比较字符串类似的方式来比较序列。如果两个序列的长度相同，并且对应元素都相等，equal() 算法会返回 true。有 4 个版本的 equal() 算法，其中两个用 == 运算符来比较元素，另

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - Bootstrap 4 : Equal width columns using grid