仅在特定页面时显示 div答案

【问题标题】：Show div only if specific page仅在特定页面时显示 div
【发布时间】：2015-03-15 07:17:28
【问题描述】：

所以我找到了我想在我的 asp.net 项目的 index html 页面中使用的 really nice bootstrap slider。

出于某种原因，如果我想直接放入 index.html：

<!-- Half Page Image Background Carousel Header -->
<div id="myCarousel" class="carousel slide">
... some data related to slider
</div>

它只是无法正确显示，但是如果我将这部分剪切并粘贴到 _Layout.html 之前：

// right before this div
<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</div>

它工作得很好。出于某种原因，滑块不喜欢在另一个 div 中，当它独立时，它工作得很好。

但显然，由于_Layout.html 在页面之间共享，我不希望每个页面都显示滑块，所以我想知道解决它的最佳方法是什么。

【问题讨论】：

标签： html asp.net asp.net-mvc twitter-bootstrap layout

【解决方案1】：

不确定为什么在 div 中存在问题（很可能您在容器类或 body-content 类中有干扰的样式），但是，您可以在布局中创建自己的自定义部分，即不是必需的，只需将该部分放在您想要的页面中即可。

把它放在 _layout.html 中您希望滑块移动的位置： @RenderSection("slider", required: false)

并将其放在您的页面中：

@section slider {
  Your slider html here
}

【讨论】：

我明白了。我查看了滑块代码，它默认为容器高度的 50%。尝试添加这个 css .body-content { height: 100%;} 这应该可以解决您的滑块问题（但可能会破坏其他页面），或者添加这个 css .carousel { height: 50vh; } 应该也可以解决它。附带说明一下，我不喜欢破坏现有行为的插件，但它就是这样。他们应该添加一个额外的类，如 carousel-half 以按照他们想要的方式设置样式。
太好了，谢谢你的回答，所以你认为我应该使用你的实际答案还是修改css？
实际上我没有找到 .body-content { height: 100%;} 或 .carousel { height: 50vh; }
我会亲自去 .css 路线，因为它是一个更好的解决方案。您可以将这些样式放入任何包含在 half-slider.css 之后的样式表中（或者只是修改 half-slider.css）

【解决方案2】：

不太确定为什么它不能在 div 中工作，但是使用两个 _Layout.html 呢？

一个用于需要滑块的站点，第二个用于所有其他站点。

【讨论】：

是的，你说 _layout.html 是在页面之间共享的，所以我想你可以只做两个。 _Layout1.html 与滑块和 _Layout.html 用于其他所有内容