Html 网格在响应部件上四处飞行

我在页面的响应部分挣扎了很多

当我缩小到991px左右时，这本书和标题文本就会四处飞扬。最初，我使用了

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>

@如果（！string.IsNullOrEmpty（headerText））
{
如果（pageAlias==“博客”）
{
@Html.Raw（headerText）
}
其他的
{

@Html.Raw（headerText）

}
}
@if（CurrentPage.HasValue（“ImageStraterText”））
{

@Html.Raw（CurrentPage.ImageStraterText）

}
@CurrentPage.GetGridHtml（“站点”）

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

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

---

它适用于大于960px范围的屏幕尺寸，与760px-440px范围相比有一点不同。我想你现在要做的就是为相应的视口宽度添加一个媒体查询。解释这个解决方案很简单。在CSS中，HTML文档中分层的所有元素都有一个z索引，该索引确定了它们在堆栈中的位置。从这里开始，为了得到z索引的响应，我将img元素的位置设置为relative。z-index属性仅在位置设置为默认值static以外的其他值时有效。我希望这有帮助！如果你有任何问题，请告诉我。

首先考虑把所有的代码发布归档，所以如果你的网站下降了，答案仍然是相关的。第二，你在你的容器上设置了一个“最大高度”，里面的任何东西都要遵守这个规则，第三，容器中的元素是浮动的，所以容器不会考虑它们的高度。从book container中删除float并删除max height，你就会明白我的意思。你还应该考虑你正在编写多少代码，因为有很多元素和类你不需要，或者被其他类覆盖。谢谢你的评论。只是我有大约4000行css代码，要记录所有代码有点困难。所以我希望我们不必这样做，当开发工具在这里的时候。我现在看这一页。我看不到容器上的最大高度或容器漂浮。你看到了哪行代码？绝对同意用户3528269。我刚刚被扔到一个登陆页面上，不知道该页面或网站。所以他们说我可以尽可能地硬编码，谢谢你为这个问题发布代码。但是，我通常不鼓励人们访问您的站点并通过开发人员控制台进行调试，因为在您修复它之后，这将不起作用，我们希望在这里提出具有潜在长期价值的问题。当你有时间的时候，想了解更多。谢谢