css - 非响应式 Bootstrap 设计

标签 css twitter-bootstrap

我的场景是

如果宽度超过 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)

最佳答案

将以下内容添加到您的 body 标记中。

当内容溢出包含它的元素时,溢出自动将滚动条添加到页面。

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

关于css - 非响应式 Bootstrap 设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42700076/

相关文章:

javascript - 为什么此图像 slider 在模式中不起作用?

HTML CSS打印出POS尺寸?

angularjs - 注入(inject) $modal 到 httpProvider

css - Bootstrap 最佳实践?

javascript - HTML/CSS 标签式导航

html - Symfony 3 - 导航栏在除一页以外的每一页上都正确显示?

css - 如何在 Extjs 6 中包含自定义 css?

css - Mapbox studio labeling - 按特征大小优先放置标签

html - a 和 p 在 DIV 中

javascript - 如何在div中添加或插入数据之前?