網格在響應部分飛來飛去

-1

當我縮小到991像素左右時，這本書和標題文字就會飛來飛去。最初我使用sm-hidden和sm-visible，因爲我希望文本標題首先出現，然後使用本書的圖片。

但我該如何解決這個問題？我開始在想法如何使它適合的時候低調，所以當我到達991 px時，本書不會在背景圖片下。我希望標題和圖書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>

來源

2016-08-19 McDuck4

首先 - 考慮發佈所有用於存檔目的的代碼，所以如果您的網站出現故障，所提供的答案仍然相關。其次 - 您的容器上設置了「最大高度」，其中的任何內容都將堅持這一規則，第三，容器中的元素是浮動的 - 因此容器不會考慮其高度。從書籍容器中取出浮子並移除最大高度，你會明白我的意思。 –

您還應該研究您編寫的代碼的數量，因爲有許多元素和類不需要或被其他類覆蓋。 – user3528269

謝謝你的評論。只是我坐在大約4000 css的線上，跟蹤所有線條有點困難。所以我跳了起來，當開發人員工具在這裏時，我們不必這麼做。我現在看看這個頁面。我看不到容器上的最大高度或容器浮動。你看到哪行代碼？ – McDuck4

所以我想我可能已經找到了解決您的問題。在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屬性僅在位置設置爲默認值靜態以外的其他屬性時才起作用。我希望這有幫助！如果您有任何問題，請告訴我。

來源

2016-08-19 11:17:54

網格在響應部分飛來飛去

回答

相關問題