我在我的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>
                            }

但我面临的问题是，在小屏幕上，问题说明会拼出屏幕，而答案文本会与屏幕大小对齐。 所以不知道我如何才能强制按钮文本在小屏幕上跨越多行？

编辑-

以下是一个问题的标记，它在小屏幕上的页面布局中拼写出来:-

<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>