Question

我在页面的响应部分中苦苦挣扎。

当我缩小到大约991像素时，这本书和标题文字正在飞来飞去。最初我使用sm-hidden和sm-visible，因为我希望文本标题首先出现，然后是书的图片。

但我怎么能解决这个问题？我开始对如何使它适合的想法不知所措，所以当我达到991像素左右时，这本书不会在背景图片下面。我希望标题和书籍img保留在背景图片中。

我希望有人可以通过开发者控制台看到这里有什么问题。我的代码到现在为止如下：

<div class="background-image" @Html.Raw(topImageStyling)>
            <div>
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 img logo img-responsive">
                            <a href="www.google.com"><img src="https://www.site.dk/img/inovo-logo-white-small.png"></a>
                        </div>
                    </div>
                </div>
                <div class="book container col-sm-12 hidden-sm hidden-xs col-md-3 col-lg-4">
                    <img src="https://www.site.dk/img/landingpages/.png">
                </div>

                    <div class="container col-sm-12 col-md-9 col-lg-8">

                        @if (!string.IsNullOrEmpty(headerText))
            {
                if (pageAlias == "Blog")
                {
                                <h1 class="header-xl center">
                                    @Html.Raw(headerText)
                                </h1>
                            }
                            else
                            {
                                <p class="header-xl">
                                    @Html.Raw(headerText)
                                </p>
                            }
                        }
                        @if (CurrentPage.HasValue("imageTeaserText"))
            {
                            <p class="sub-header center">
                                @Html.Raw(CurrentPage.imageTeaserText)
                            </p>
                        }


                    </div>
                <div class="col-sm-12 visible-sm visible-xs">
                    <img src="https://www.site.dk/img/landingpages/g.png">
                </div>
                </div>
        </div>

    <div class="container-fluid">
        <div class="row">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12 main-content" id="main-content">
                        <div class="row">
                            <div class="col-lg-12">
                                @CurrentPage.GetGridHtml("site")
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

所以我想我可能找到了解决问题的方法。在CSS的第3044行，有img元素。我只是在您的代码中添加了以下内容：

img {
display: block;
max-width: 100%;
height: auto;
position: relative;
z-index: 1030;}

适用于大于960px范围的屏幕尺寸，并且在760px-440px范围内略微增加。我想你现在要做的就是为相应的视口宽度添加媒体查询。解释解决方案很简单。在CSS中，HTML文档中分层的所有元素都有一个z-index，用于确定堆栈中的位置。从那里，为了使z-index响应，我将该位置设置为该img元素的相对位置。 z-index属性仅在将position设置为static（默认值）以外的值时才有效。我希望这有帮助！如果您有任何问题，请告诉我。

网格在响应部分上飞来飞去

1 个答案: