html - 如何使 Bootstrap 导航栏在某个断点处消失

Question

我有一个没有响应的 Bootstrap 导航栏。当某个跨度不再可见时，我需要它完全消失。我找到了更改响应式导航栏断点的示例，但我无法将其应用于我需要的内容。

<div class="my-fluid-container">
    <div class="navbar navbar-inverse navbar-fixed-bottom" style="background-color: #428bca">
        <div class="nav navbar-nav no-overflow" style="padding-top:15px">
            <span style="font-size: 16px;margin-left:20px;"><span style="font-size: 18px; color: white;">JobNumber: &nbsp;</span><span style="color: white">{{selectedJob.JobNumber}}</span></span>
            <span style="font-size: 16px; margin-left:50px"><span style="font-size: 18px; color: white;">JobName: &nbsp;</span><span style="color: white">{{selectedJob.JobName}}</span></span>
            <span style="font-size: 16px;margin-left:50px"><span style="font-size: 18px; color: white;">OriginalContract: &nbsp;</span><span style="color: white">$ {{selectedJob.JobOriginalContract  | number : fractionSize}}</span></span>
            <span style="font-size: 16px;margin-left:50px"><span style="font-size: 18px; color: white;">RevisedContract: &nbsp;</span><span style="color: white">$ {{selectedJob.JobRevisedContract  | number : fractionSize}}</span></span>
            <span style="font-size: 16px;margin-left:50px"><span style="font-size: 18px; color: white;">Budget: &nbsp;</span><span style="color: white">$ {{selectedJob.JobOriginalBudget  | number : fractionSize}}</span></span>
            <span style="font-size: 16px;margin-left:50px"><span style="font-size: 18px; color: white;">RemainingBudget: &nbsp;</span><span style="color: white">$ {{selectedJob.JobRemainingBudget  | number : fractionSize}}</span></span>
            <span style="margin-left:200px; font-size: 16px;"><span style="font-size: 18px; color: white;">Logged In As: @Html.ActionLink(User.Identity.GetUserName(), "Manage", "Account", routeValues: null, htmlAttributes: new { title = "Manage", @style = "color:white" })</span></span>
        </div>
    </div>
</div>

当 div 的最后一个跨度不再可见时，我需要整个栏消失。

当前的 css 以防止栏折叠和打开滚动条。

.no-overflow {
    position:absolute;
    top:0;
    left:0;
    display: block;
    white-space: nowrap;
    overflow: auto;
    margin-top: 0;
    max-width:100%;
}

Answer 1

您可以使用媒体查询来影响给定分辨率的元素，例如，在这里，用户在 1500px(浏览器宽度)后消失了一点，因此使用这段代码，您可以隐藏您想要的元素这个决议，你必须把它放在最后的样式中。

@media screen and (max-width:1500px){
    .no-overflow{
        display:none;
    }
}

为了避免在栏上滚动，只需将溢出更改为隐藏即可

.no-overflow {
    position:absolute;
    top:0;
    left:0;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 0;
    max-width:100%;
}