Question

所以，我试图让我的模态仅适用于小于平板电脑的屏幕。这成功了。但是现在，我做了一些改变，我也需要回家来处理桌面大小。

我尝试将d-none移至d-block，但它无法正常工作

有什么想法吗？

<div class="col-5 col-sm-2 ml-auto aboutMid aboutMid1">
                            <figure class="cap-left">

                                <img src="assets/about/about1.jpg" class="img-fluid">
                                <a href="#myModal" role="button" data-toggle="modal" class="d-inline d-xl-none"><figcaption>
                                    The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
                                    </figcaption></a>
                                <figcaption class="d-none d-xl-inline">
                                    The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
                                </figcaption>
                            </figure>

                        </div>

                        <!-- Modal -->
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="#myModal" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-body">
                                        <img src="assets/about/about1.jpg" class="img-fluid">
                                        The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
                                    </div>

                                </div>
                            </div>
                        </div>

Answer 1

嗯，那只是因为我设计了那段代码片段。这种行为是原始提问者想要的。

因此，为了让链接显示在大屏幕上（基本上无处不在），您只需注释掉或删除第二个figcaption，并从第一个删除d-xl-none类。

这是工作代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-5 col-sm-2 ml-auto aboutMid aboutMid1">
            <figure class="cap-left">

                <img src="https://placeimg.com/640/480/animals" class="img-fluid">
                <a href="#myModal" role="button" data-toggle="modal" class="d-inline"><figcaption>
                    The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
                    </figcaption></a>
<!--
                <figcaption class="d-none d-xl-inline">
                    The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
                </figcaption>
-->
            </figure>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="#myModal" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <img src="https://placeimg.com/540/380/animals" class="img-fluid">
                        The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Modal在桌面上停止响应

1 个答案: