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%;
}

如何使引导导航栏在某个断点处消失

1 个答案: