下面的 CSS 应该会导致白色边框出现在图片库中当前事件的缩略图下方,但实际上并没有。
.carousel-thumbnails .carousel-indicators li {
height: auto;
max-width: 100px;
width: 100px;
border: none;
box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.75);
&.active {
border-bottom: 4px solid #fff;
}
}
Visual Studio 17 下划线“&”表示缺少属性。我见过像 P 或 H1 这样设置事件的例子,但我不明白为什么那里有“&”符号。 CSS 来自以下链接,其中包含完整的代码集。
我已将示例库添加到我的 ASP.NET MVC 5 应用程序的 View 中。除了在事件缩略图下方绘制细边框的 CSS 部分外,一切正常。有人可以告诉我如何修复它,或者这是在 Visual Studio 2017 下无法正常工作的东西吗?
下面是我使用示例创建的 MVC View 的副本:
@{
ViewBag.Title = "Claremont Botanical Garden";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<br />
<link href="~/Content/slideshow/carousel-with-thumbails.css" rel="stylesheet" />
<script src="~/Scripts/slideshow/carousel-with-thumbails.js"></script>
<!--Carousel Wrapper-->
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel">
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100"
src="~/Content/Images/Photos/Animals/_Squirrel-01-DSC_0028-1440.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="~/Content/Images/Photos/Animals/_Squirrel-02-DSC_0131-1440.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="~/Content/Images/Photos/Animals/_Squirrel-03-DSC_0154-1440.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="~/Content/Images/Photos/Animals/_Bird-01-DSC_0639-1440.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="~/Content/Images/Photos/Animals/_bird-02-DSC_0158-1440.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="~/Content/Images/Photos/Animals/_Bird-03-DSC_0606-1440.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="~/Content/Images/Photos/Animals/_Bird-04-DSC_0637-1410.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="~/Content/Images/Photos/Animals/_Bird-hawk-01-DSC_0550-1440.jpg" alt="Third slide">
</div>
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
<ol class="carousel-indicators">
<li data-target="#carousel-thumb" data-slide-to="0">
<img class="d-block w-100 img-fluid"
src="~/Content/Images/Photos/Animals/_Squirrel-01-DSC_0028-1440.jpg">
</li>
<li data-target="#carousel-thumb" data-slide-to="1">
<img class="d-block w-100 img-fluid"
src="~/Content/Images/Photos/Animals/_Squirrel-02-DSC_0131-1440.jpg">
</li>
<li data-target="#carousel-thumb" data-slide-to="2">
<img class="d-block w-100 img-fluid"
src="~/Content/Images/Photos/Animals/_Squirrel-03-DSC_0154-1440.jpg">
</li>
<li data-target="#carousel-thumb" data-slide-to="3" class="active">
<img class="d-block w-100 img-fluid"
src="~/Content/Images/Photos/Animals/_Bird-01-DSC_0639-1440.jpg">
</li>
<li data-target="#carousel-thumb" data-slide-to="4">
<img class="d-block w-100 img-fluid"
src="~/Content/Images/Photos/Animals/_bird-02-DSC_0158-1440.jpg">
</li>
<li data-target="#carousel-thumb" data-slide-to="5">
<img class="d-block w-100 img-fluid"
src="~/Content/Images/Photos/Animals/_Bird-03-DSC_0606-1440.jpg">
</li>
<li data-target="#carousel-thumb" data-slide-to="6">
<img class="d-block w-100 img-fluid"
src="~/Content/Images/Photos/Animals/_Bird-04-DSC_0637-1410.jpg">
</li>
<li data-target="#carousel-thumb" data-slide-to="7">
<img class="d-block w-100 img-fluid"
src="~/Content/Images/Photos/Animals/_Bird-hawk-01-DSC_0550-1440.jpg">
</li>
</ol>
</div>
<!--/.Carousel Wrapper-->
提前致谢。
最佳答案
你复制的是SCSS ,不是纯 CSS。如果您没有使用预处理器,您复制的代码将无法运行。
此上下文中的符号 &
表示选择器 .carousel-thumbnails .carousel-indicators li.active
The Sass Ampersand .
因此,如果您不使用预处理器,请删除嵌套规则 &.active { border-bottom: 4px solid #fff; }
而是创建一个新的(非嵌套的)规则 .carousel-thumbnails .carousel-indicators li.active { border-bottom: 4px solid #fff; }
并且它应该可以工作(我假设您在元素处于事件状态时还有其他应用 .active
类的东西)。
关于javascript - CSS 不在 MVC 5 View For image-gallery 中的事件缩略图下方绘制边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55912669/