C# 旋转木马文本不是';不在图片上显示吗?

C# 旋转木马文本不是';不在图片上显示吗?,c#,html,css,carousel,C#,Html,Css,Carousel,我使用了w3school引导主题,但是图片上应该显示的文本没有显示出来。我确实更改了图像,所以可能有问题,希望您能提供帮助 当我运行我的网页时,我看不到滑块上的文本,并且尝试了许多不同的事情,但没有结果 这是我的代码,非常新,所以不确定我是否正确地执行了代码块,以便向您展示它 <html lang="en"> <head> <!-- Theme Made By www.w3schools.com - No Copyright --> <title>

我使用了w3school引导主题,但是图片上应该显示的文本没有显示出来。我确实更改了图像,所以可能有问题,希望您能提供帮助

当我运行我的网页时,我看不到滑块上的文本,并且尝试了许多不同的事情,但没有结果

这是我的代码,非常新,所以不确定我是否正确地执行了代码块,以便向您展示它

<html lang="en">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>Bootstrap Theme The Band</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.container {
  padding: 80px 120px;
}
.person {
  border: 10px solid transparent;
  margin-bottom: 25px;
  width: 80%;
  height: 80%;
  opacity: 0.7;
}
.person:hover {
  border-color: #f1f1f1;
}
.carousel-inner img {
  /*-webkit-filter: grayscale(90%);*/
  /*filter: grayscale(90%); /* make all photos black and white */
  width: 100%; /* Set width to 100% */
  margin: auto;
}
.carousel-caption h3 {
  color: #fff !important;
}

.carousel-caption {
  display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
}

.navbar {
  margin-bottom: 0;
  background-color: #2d2d30;
  border: 0;
  font-size: 11px !important;
  letter-spacing: 4px;
  opacity: 0.9;
}
.navbar li a, .navbar .navbar-brand { 
  color: #d5d5d5 !important;
}
.navbar-nav li a:hover {
  color: #fff !important;
}
.navbar-nav li.active a {
  color: #fff !important;
  background-color: #29292c !important;
}
.navbar-default .navbar-toggle {
  border-color: transparent;
}
.open .dropdown-toggle {
  color: #fff;
  background-color: #555 !important;
}
.dropdown-menu li a {
  color: #000 !important;
}
.dropdown-menu li a:hover {
  background-color: red !important;
}

footer {
  background-color: #2d2d30;
  color: #f5f5f5;
  padding: 32px;
}
footer a {
  color: #f5f5f5;
}
footer a:hover {
  color: #777;
  text-decoration: none;
}  

</style>
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-   toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Logo</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#myPage">Algorithmer/Robothandel</a></li>
                <li><a href="#band">Analyser/Trading idéer</a></li>
                <li><a href="#tour">Tradingskolan</a></li>
                <li><a href="#contact">Kontakt</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        MORE
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Merchandise</a></li>
                        <li><a href="#">Extras</a></li>
                        <li><a href="#">Media</a></li>
                    </ul>
                </li>


            </ul>
        </div>
    </div>
</nav>



<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="~/images/Buysell.png" alt="New York" width="1200" height="700">
            <div class="carousel-caption">
                <h3>New York</h3>
                <p>Syns texten någonstans?.</p>
            </div>
        </div>

        <div class="item">
            <img src="~/images/surf.jpg" alt="Chicago">              
                <div class="carousel-caption">
                    <h3>Chicago</h3>
                    <p>Thank you, Chicago - A night we won't forget.</p>                    
            </div>
        </div>

        <div class="item">
            <img src="~/images/kite.png" alt="Los Angeles" width="1200" height="700">
            <div class="carousel-caption">
                <h3>LA</h3>
                <p>Even though the traffic was a mess, we had the best time playing at Venice Beach!</p>
            </div>
        </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">    </span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"> </span>
        <span class="sr-only">Next</span>
    </a>
</div>

<div class="container text-center">
    <h3>En sida om trading</h3>
    <p><em>Följ din dröm!</em></p>
    <p>mmmmmmmmmmmmmmmmmm       sssssssssssssss          sssss
    ssssssssssssssssss         fffffffffffffffff fffffffffffff
    ffffffffffffff ffffffffffff ffffffffffffffff
    ve created a fictional band website. Lorem ipsum..</p>
    <br>
    <div class="row">
        <div class="col-xs-4">
            <p class="text-center"><strong>Algoritmer/Robothandel</strong>  </p><br>
            <a href="#demo" data-toggle="collapse">
                <img src="~/images/robot.png" class="img-circle person" alt="Random Name" width="255" height="255">
            </a>
            <div id="demo" class="collapse">
                <p>Guitarist and Lead Vocalist</p>
                <p>Loves long walks on the beach</p>
                <p>Member since 1988</p>
            </div>
        </div>
        <div class="col-xs-4">
            <p class="text-center"><strong>Analyser/Trading idéer</strong></p><br>
            <a href="#demo2" data-toggle="collapse">
                <img src="~/images/kite.png" class="img-circle person"   alt="Random Name" width="255" height="255">
            </a>
            <div id="demo2" class="collapse">
                <p>Drummer</p>
                <p>Loves drummin'</p>
                <p>Member since 1988</p>
            </div>
        </div>
        <div class="col-xs-4">
            <p class="text-center"><strong>Tradingskolan</strong></p><br>
            <a href="#demo3" data-toggle="collapse">
                <img src="~/images/skolan.png" class="img-circle person" alt="Random Name" width="255" height="255">
            </a>
            <div id="demo3" class="collapse">
                <p>Bass player</p>
                <p>Loves math</p>
                <p>Member since 2005</p>
            </div>
        </div>
    </div>
</div>


<footer class="text-center">      


    <p>Bootstrap Theme Made By <a href="https://www.w3schools.com" data-toggle="tooltip" title="Visit w3schools">www.w3schools.com</a></p>
</footer>



</body>
</html>

引导主题乐队
.集装箱{
填充:80px 120px;
}
.人{
边框:10px实心透明;
边缘底部:25px;
宽度:80%;
身高:80%;
不透明度:0.7;
}
.人:悬停{
边框颜色:#f1f1;
}
.旋转木马内部img{
/*-webkit过滤器:灰度(90%)*/
/*滤镜:灰度(90%);/*使所有照片黑白*/
宽度:100%;/*将宽度设置为100%*/
保证金:自动;
}
.旋转木马标题h3{
颜色:#fff!重要;
}
.旋转木马标题{
显示:无;/*当屏幕宽度小于600像素时隐藏旋转木马文本*/
}
navbar先生{
页边距底部:0;
背景色:#2d30;
边界:0;
字体大小:11px!重要;
字母间距:4px;
不透明度:0.9;
}
.navbar li a、.navbar.navbar品牌{
颜色:#d5d5d5!重要;
}
.导航栏导航李a:悬停{
颜色:#fff!重要;
}
.导航栏导航李.主动a{
颜色:#fff!重要;
背景色:#29292c!重要;
}
.navbar默认值.navbar切换{
边框颜色:透明;
}
.打开.下拉开关{
颜色:#fff;
背景色:#555!重要;
}
.下拉菜单LIA{
颜色:#000!重要;
}
.下拉菜单li a:悬停{
背景色:红色!重要;
}
页脚{
背景色:#2d30;
颜色:#F5;
填充:32px;
}
页脚a{
颜色:#F5;
}
页脚a:悬停{
颜色:#777;
文字装饰:无;
}  
  • 纽约 Syns texten någonstans

    芝加哥 谢谢你,芝加哥——一个我们不会忘记的夜晚。

    洛杉矶 尽管交通混乱,我们还是在威尼斯海滩玩得很开心

    恩斯达姆贸易公司 Följ din dröm

    mmmmmmmmmmmmmmmmmmmmmmmmsssssssssss SSSSSSSSSSSSSSSSFFFFFFFFFFFFFFFFFFFFFFFFFFFFF FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF 我创建了一个虚构的乐队网站。同侧眼睑


    Algoritmer/Robothandel
    吉他手兼主唱

    喜欢在海滩上散步

    1988年以来的成员

    分析器/交易idéer
    鼓手

    喜欢鼓声'

    1988年以来的成员

    Tradingskolan
    贝司手

    热爱数学

    2005年以来的成员

    引导主题由


    当我运行您的代码时,我可以看到您的css样式设置为“无显示”

    .carousel-caption {
      display: none;
    }
    
    如果您将此注释掉/*显示:无;*/或者改成

    .carousel-caption {
      display: block;
    }
    

    这将显示图像上方的文本。

    从css中删除以下代码:

    .carousel-caption {
      display: none;
      /* Hide the carousel text when the screen is less than 600 pixels wide */
    } 
    
    上述文本应放在媒体查询中,以在小于600px的屏幕上隐藏文本

    如果您希望实现相同的目标,您可以改为附加以下代码:

    @media only screen and (max-width: 600px) {
        .carousel-caption {
          display: none;
          /* Hide the carousel text when the screen is less than 600 pixels wide */
        } 
    }
    

    谢谢,不过我没有让@media工作。它说“媒体名称在当前上下文中不存在”。不确定要做什么。样式标记中应使用@media