Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/39.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 如何使用Bootstrap 4.0强制按钮文本在小屏幕上跨越多行_Css_Twitter Bootstrap_Bootstrap 4_Asp.net Core Mvc_Media Queries - Fatal编程技术网

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

Css 如何使用Bootstrap 4.0强制按钮文本在小屏幕上跨越多行,css,twitter-bootstrap,bootstrap-4,asp.net-core-mvc,media-queries,Css,Twitter Bootstrap,Bootstrap 4,Asp.net Core Mvc,Media Queries,我的asp.net mvc核心web应用程序+bootstrap 4.0中包含以下代码,其中显示了一个常见问题:- @foreach (var item2 in Model.OrderBy(a => a.Description)) { <div class="card">

我的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>
                            }
@foreach(Model.OrderBy(a=>a.Description)中的var item2)
{
@DisplayFor(modelItem=>item2.Description)
@Html.Raw(item2.Answer)
}
但我面临的问题是,问题描述将在小屏幕上的屏幕外拼写,而答案文本将与屏幕大小对齐。。所以我不知道如何在小屏幕上强制按钮文本跨越多行

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

                      

正在提供哪些服务?如果我的机构已经在执行这些服务,该怎么办?
来自Bootstrap的官方网站->我刚刚在按钮上添加了文本,它会自动跨越多行 请提供实际网页的截图和HTML代码,这些截图不是来自ASP.NET,而是来自浏览器的“元素”选项卡。我相信你只是说了个大话。 如果是,请检查此链接(交互式)

编辑1

只需将您的按钮复制粘贴到bootstraps网站()上完全相同的组件中即可-仍能正常工作。 还是很难给你一个明确的答案。。。 我建议两件事:

  • 尝试将
    btn块
    类添加到按钮中
  • 提供您现在拥有的屏幕截图以及“计算道具”选项卡的屏幕截图1)选择您的按钮2)切换到“计算道具”选项卡3)共享浏览器应用于您的按钮的所有道具,可能有一些自定义内容

  • 用问题的标记更新了我的问题。。谢谢你的回复