非応答性のブートストラップのデザイン

私のシナリオでは、私は幅が1024px以上である場合には反応するように私のアプリにしたい非応答性のブートストラップのデザイン

です。

ユーザーがブラウザで再生していて、1024px未満のマークを表示した場合は、アプリが応答しないようにして、水平スクロールバーを表示します。

min-widthをbodyタグに配置しようとしましたが、それでも1024px以下で反応します。

どうすればいいですか？

<body style="min-width: 1300px"> 
<div class="navbar navbar-fixed-top" style="background-color: #f5f5f5"> 
    <div class="row"> 
     <div class="navbar-header col-md-4"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      @Html.ActionLink("Home", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
     </div> 

      <div class="col-md-2 text-center"> 
       <b>Hello</b> 
      </div> 
      <div class="col-md-2 text-center"> 
       <b>Hello</b> 
      </div> 
      <div class="col-md-2 text-center"> 
       <b>Hello</b> 
      </div> 
      <div class="col-md-2 text-center"> 
       <b>Hello</b> 
      </div> 
     </div> 

</div>

@RenderBody（）

@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/bootstrap") 
@RenderSection("scripts", required: false)

出典

2017-03-09 Chatra

あなたのコードはどこですか？ –

コードはかなり簡単です。私はコードを今すぐ追加しました – Chatra

あなたbodyタグに以下を追加します。

オーバーフローオートは、コンテンツが含まれている要素の上にコンテンツがこぼれると、ページにスクロールバーを追加します。

body { 
    min-width: 1024px; 
    overflow: auto; 
}

出典

2017-03-09 16:16:50

990px未満になった後は反応的になっています – Chatra

bodyタグのCSSを投稿できますか？何かがそれを無効にする必要があります。上の2つの属性に '！important'を追加すると効果がありますか？他に何か問題が起きている場合 –

ブートストラップファイル以外の特別なCSSはありません – Chatra

ウェブサイトが応答性が高くなるさまざまな方法があります。解決策は、ライブラリによって使用される技術に依存します。

最も簡単な方法は、あなたがこのようなあなたのCSSのbodyタグに分-widthプロパティを追加することができるということです。

body { 
    min-width : 1024px; 
}

しかし、ライブラリは@mediaクエリを使用する場合、このアプローチは動作しません。この場合、あなたはあなたのCSSのそれらを無効にする必要があります。 bodyタグの前に@mediaを追加するだけです。

@media (max-width: 1024px) { 
    body { 
    min-width:1024px; 
    } 
} 
@media (max-width: 990px) { 
    body { 
    min-width:990px; 
    } 
}

メディアクエリは、ブラウザの現在の解像度に応じてウェブサイトを調整します。

出典

2017-03-09 16:41:34

990px未満になった後は反応的になっています – Chatra

私はそれを見るために使用したブートストラップのCSS/jsのリンクを共有できますか？ –

@chatra 990pxのメディアタグは、1024pxの場合と同様に追加できます。 –

非応答性のブートストラップのデザイン

答えて

関連する問題