無響應的引導程序設計

我希望我的應用程序能夠響應，如果寬度超過1024像素。

如果用戶正在使用瀏覽器，並且如果他擊中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標籤。

當內容溢出包含它的元素時，overflow auto會將滾動條添加到頁面。

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

來源

2017-03-09 16:16:50

在它低於990px後變得很快響應 – Chatra

您可以發佈您的身體標記的CSS嗎？一定要壓倒它。上面的兩個屬性是否加上'！important'？如果沒有其他問題導致問題。 –

我沒有任何特殊的css以外的引導文件 – Chatra

網站有多種響應方式。解決方案將取決於圖書館使用的技術。

最簡單的方法是，你可以像這樣的最小寬度屬性添加到你的CSS身體標記：

body { 
    min-width : 1024px; 
}

但是，當庫使用@media查詢這種做法是行不通的。在這種情況下，你需要重寫你的CSS中的那些。只需在您的身體標記之前添加@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您可以爲990像素添加媒體標籤，就像爲1024像素一樣。 –

無響應的引導程序設計

回答

相關問題