无响应的引导程序设计

我希望我的应用程序能够响应，如果宽度超过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像素一样。 –

无响应的引导程序设计

回答

相关问题