Css 如何使用Bootstrap 4.0强制按钮文本在小屏幕上跨越多行
我的asp.net mvc核心web应用程序+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">
@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块
类添加到按钮中用问题的标记更新了我的问题。。谢谢你的回复