我如何使用 Bootstrap 4.0 强制按钮文本在小尺寸屏幕上跨越多行

Question

我的 asp.net mvc 核心 Web 应用程序 + bootstrap 4.0 中有以下代码，其中显示了一个常见问题解答问题：-

                     @foreach (var item2 in Model.OrderBy(a => a.Description))
                            {
                                <div class="card">
                                    <div class="card-header" id="@item2.Id+'headingTwoa'">
                                        <h5 class="mb-0">
                                            <button class="btn btn-link collapsed" data-toggle="collapse"
                                                    data-target="#@item2.Id" aria-expanded="false"
                                                    aria-controls="collapseTwo">
                                                @Html.DisplayFor(modelItem => item2.Description)
                                            </button>
                                        </h5>
                                    </div>
                                    <div id="@item2.Id" class="collapse" aria-labelledby="headingTwoa"
                                         data-parent="#accordion" style="">
                                        <div class="card-body">
                                            @Html.Raw(item2.Answer)
                                        </div>
                                    </div>
                                </div>
                            }

但我面临的问题是问题描述将在小尺寸屏幕上拼出屏幕，而答案文本将与屏幕尺寸对齐..所以不知道如何强制按钮文本跨越多行在小屏幕上？

Edit-1:-

这是一个问题的标记，它在小尺寸屏幕上拼写出页面布局：-

<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#1004" aria-expanded="false" aria-controls="collapseTwo">
What services are being provided?  What if my practice is already performing these services?
</button>
              

                      

Answer 1

https://prnt.sc/t3ptin来自Bootstrap的官方网站->我只是在按钮上添加了文本，它会自动跨越多行 请提供实际网页的屏幕截图和 HTML 代码，而不是来自您的 ASP.NET，而是来自浏览器的“元素”选项卡。我相信你只是有一个非常大的词。 如果是这样，请检查此链接（交互式）https://developer.mozilla.org/ru/docs/Web/CSS/word-break

编辑 1

只需将您的按钮复制粘贴到引导网站上完全相同的组件中（https://getbootstrap.com/docs/4.5/components/collapse/#accordion-example）-https://prnt.sc/t3t7k6 仍然可以按预期工作。 还是很难给你一个明确的答案…… 我会建议两件事：

1. 也尝试将btn-block 类添加到您的按钮
2. 提供您现在拥有的屏幕截图以及计算道具选项卡的屏幕截图https://prnt.sc/t3t9rr 1) 选择您的按钮 2) 切换到计算选项卡 3) 共享浏览器应用于您的按钮的所有道具，也许有一些自定义