Question

我还在学习BootStrap，并设法设计了我的页面，但现在我已经搞清楚了屏幕大小，特别是旋转木马。当我将屏幕缩小时，我试图让旋转木马改变高度，但出于某种原因，当我编写媒体查询时没有任何变化。

This is what I'm trying to achieve, the first two screens are mine, the other two are the website I'm trying to replicate.

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class=""></li>
    <li data-target="#myCarousel" data-slide-to="1" class=""></li>
    <li data-target="#myCarousel" data-slide-to="2" class="active"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item">
      <img class="opacify9 bgwidth" src="img/Carousel_CW_Test.jpg" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Civil War</h1>
            <p>Protect The Future</p>
            <p>Change the Future</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">Order Now</a></p>
        </div>
      </div>
    </div>
    <div class="item active left">
      <img class="opacify7 bgwidth" src="img/Test_Carousel_Saga_1.jpg" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Saga</h1>
            <p>Buy The Latest Issue Of The Epic Space Opera</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">Check It Out!</a></p>
        </div>
      </div>
    </div>
    <div class="item next left">
      <img class="bgheight" src="img/Test_Carousel_SW_2.jpg" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Secret Wars</h1>
          <p>The Final Issue Drawing Jonathan Hickmans Epic Story To A Conclusion</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Join Us</a></p>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

这是我写过的媒体查询CSS

/* Portrait & Landscape Phone */
@media (max-width: 480px) {

.carousel, .carousel .carousel-inner .item {
    height: 325px;
}
}


/* Landscape Phone To Portrait Tabelt */
@media (max-width: 991px) {


 }
 /* Large Desktop */

 @media (min-width: 1200px) {

}

Answer 1

你的问题可能是carousel的bootstrap属性将覆盖你的自定义CSS属性。为了解决这个问题，您可以在自定义CSS之前提及！重要的是

@media (max-width: 480px) {

.carousel, .carousel .carousel-inner .item {
    height: 325px !important;
}
}

然而，更好的方法是在加载custom css后在文档中添加bootstrap文件。

Answer 2

由于以前的CSS语法错误，它无法正常工作，如果您尝试按原样验证它，您将收到以下错误：

第36行： [h1，h2，h3，h4，h5，h6]属性系列字体不存在：inherit

这应该是：font-family: inherit;

第167行： [.carousel-indicators li]属性border-raidus不存在：10px

这应该是：border-radius: 10px

第221行： [.carousel-caption btn]解析错误（0 0 15px rgba（0,0,0,002）

这应该是：

.carousel-caption .btn {
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

第233行： [.carousel-control]属性text-sahdow不存在：0 1px 2px rgba（0,0,0,0.6）

这应该是：text-shadow: 0 1px 2px rgba(0,0,0,0.6);

这里的真正问题是第221行的box-shadow属性。其他错误不会影响您的CSS文件，但是这个错误会在忽略后生成所有规则。

因此，在编写代码并在询问SO之前尝试验证时请小心。

CSS验证器：https://jigsaw.w3.org/css-validator/

我的媒体查询不在Bootstrap中工作

2 个答案: