html - 包含描述的按钮将隐藏在移动视图中

Question

我正在研究一个 asp.net 核心 MVC >> 在 y 视图中我正在显示一个常见问题解答部分。如下：-

<div class="container">
        <div class="row ">
            <div class="col-xl-2 mx-auto d-none d-sm-block">
                <div class="service_details_left">
                    <div class="nav nav-pills" id="v-pills-tab" role="tablist"
                         aria-orientation="vertical">
                       
                    </div>
                </div>
            </div>
            <div class="accordion_area col-xl-8">
                <div class="faq_ask">
                    <h3 class="large-heading-3">Frequently Asked Questions</h3>
                    <div id="accordion">

                            @foreach (var item2 in Model.OrderBy(a => a.Order))
                            {
                                <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">
                                              <span class="expandable-heading">  @Html.DisplayFor(modelItem => item2.Description)</span>
                                            </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>
                            }
                    </div>
                </div>
            </div>
            <div class="col-xl-2">
            </div>
            </div>
    </div>

但在宽屏上，FAQ 将正确显示，如下所示：-

在移动端查看问题的描述将被隐藏如下！！

请问有什么建议吗？

标签： htmlcssasp.net-corebootstrap-4

Answer 1

你可以试试这个片段。

<div class="container">
<div class="row ">
    <div class="col-xl-2 mx-auto d-none d-sm-block">
        <div class="service_details_left">
            <div class="nav nav-pills" id="v-pills-tab" role="tablist"
                 aria-orientation="vertical">

            </div>
        </div>
    </div>
    <div class="accordion_area col-xl-8">
        <div class="faq_ask">
            <h3 class="large-heading-3">Frequently Asked Questions</h3>
            <div id="accordion">
                <div class="accordion" id="accordion">
                    @foreach (var item2 in Model.OrderBy(a => a.Order))
                    {
                        <!-- here -->
                         <div class="card">
                        <div class="card-header" id="[e-mail]">
                            <h5 class="mb-0">
                                <button class="btn btn-link collapsed " data-toggle="collapse"
                                        data-target="#[e-mail]" aria-expanded="true"
                                        aria-controls="@item2.Id">
                                    <span class="expandable-heading">  @Html.DisplayFor(modelItem => item2.Description)</span>
                                </button>
                            </h5>
                        </div>
                        <div id="[e-mail]" class="collapse" aria-labelledby="[e-mail]"
                             data-parent="#accordion" >
                            <div class="card-body">
                                @Html.Raw(item2.Answer)
                            </div>
                        </div>
                       </div>
                    }

                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-2">
    </div>
</div>
 </div>

注意：id 需要以字母开头。