グリッドが反応している部分に飛び散っています

Question

私はページの反応しやすい部分で多くの苦労をしています。

私は約991pxにスケールダウンすると、本と見出しのテキストが飛んでいます。もともと、私はsm-hiddenとsm-visibleを使っていました。なぜなら、私はテキストの見出しが最初に来て、その後はその本の絵が好きだからです。

どうすればこの問題を解決できますか？私はそれを適合させるためにアイデアを低く実行し始めているので、私は991pxの周りに到達すると、本の背景になることはありません。私はヘッドラインと本が背景画像の中にとどまっていることを願っています。

誰かが開発者コンソールで何が間違っているかを確認できますことを願っています。これまでのコードは、次のようになりました。

<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;} 

画面が960ピクセル幅の範囲よりも大きいサイズと760px-440pxの範囲から少しアップ機能のためにそれは動作します。私は今あなたがしなければならないことは、対応するビューポート幅のメディアクエリを追加することだと思った。解決策を説明するのは簡単です。 CSS内では、HTML文書内で階層化されているすべての要素に、スタック内の位置を決定するZインデックスがあります。そこから、z-indexを返すために、img要素の相対的な位置を設定します。 z-indexプロパティは、位置がデフォルト値であるstatic以外の値に設定されている場合にのみ機能します。私はこれが助けて欲しい！ご質問がある場合はお知らせください。