css文字不显示响应手机

第一个图像是桌面view.it是没问题的，但是当我在浏览器中观看手机视图。 h1正在上升，并没有在屏幕上显示。css文字不显示响应手机

//第二个图像是为移动设备查看。我希望在这里解释这个问题。

HTML代码

<div class="container" id="slide"> 

     <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"> 
      <div class="item active"> 
      <img src="img/bg3.jpg" alt="Los Angeles" style="width:100%; max-height: 900px;"> 

      <div class="carousel-caption"> 
      <img src="img/logo1.png" width="50px;" height="50px;"> 

      <h1 style="font-size: 75px; font-weight: bold; color: #fc4128; text-shadow: 2px 2px #00a0c6; padding-bottom: auto; ">Bluebay Systems Ltd</h1> 


      <h3 style="color:white; font-weight: bold;padding-bottom: 50px;">Complete IT Solution For Your Every Need</h3> 
      <br> 
      <br> 
      <a href="#about" class="btn btn-dark btn-lg">Find Out More</a> 
     </div> 
      </div> 

      <div class="item" style=" max-height: 900px;"> 
      <img src="img/bg1.jpg" alt="Chicago" style="width:100%; max-height: 900px;"> 
      <div class="carousel-caption"> 
      <img src="img/logo1.png" width="50px;" height="50px;"> 

      <h1 style="font-size: 75px; font-weight: bold; color: #fc4128; text-shadow: 2px 2px #00a0c6; padding-bottom:auto; ">Bluebay Systems Ltd</h1> 

      <h3 style="color: white; font-weight: bold;padding-bottom: 50px;" >Complete IT Solution For Your Every Need</h3> 
      <br> 
      <a href="#about" class="btn btn-dark btn-lg">Find Out More</a> 
     </div> 
      </div> 

      <div class="item"> 
      <img src="img/bg.jpg" alt="New york" style="width:100%; max-height: 900px;"> 
      <div class="carousel-caption"> 
      <img src="img/logo1.png" width="50px;" height="50px;"> 

      <h1 style="font-size: 75px; font-weight: bold; color: #fc4128; text-shadow: 2px 2px #00a0c6; padding-bottom: auto; ">Bluebay Systems Ltd</h1> 

      <h3 style="color: white; font-weight: bold; padding-bottom: 50px;padding-top: 10px;" >Complete IT Solution For Your Every Need</h3> 
      <br> 
      <a href="#about" class="btn btn-dark btn-lg">Find Out More</a> 
     </div> 
      </div> 
     </div> 

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

CSS代码

#slide{ 

    width: 100%; 

    padding-left: 0px; 
    padding-right: 0px; 
}

来源

2017-07-16 Mirthful Nahid

你能张贴您的CSS代码也一样，好吗？ –

@AurelBílý补充说 –

请检查引导CSS并找到以下内容。

@media screen and (max-width: 767px) { 

    /* Hide captions class */ 
    .carousel-caption { 
    display: none 
    } 
}

来源

2017-07-16 12:00:03

添加上最后一个CSS文件的底部，或在media.css为CSS查询：

@media screen and (min-width: 300px) and (max-width: 767px){ 


    /* Hide captions class */ 
    .carousel-caption { 
    display: block !important; 
    } 
}

来源

2017-07-16 13:02:02 Wordica

css文字不显示响应手机

回答

相关问题