メディアストラテジーがブートストラップで動作しない

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

問題が書かれているメディアクエリーCSSです。それを解決するためには、言及することができます！

@media (max-width: 480px) { 

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

のようなあなたのカスタムCSSの前に重要なしかし、より良い方法は、あなたがbootstrapをロードした後、文書であなたのcustom cssファイルを追加することになります。

Answer 2

それはあなたがそのままそれを検証しようとした場合、あなたは次のエラーを取得します、なぜなら、以前のCSSの構文エラーの動作しませんでした：

ライン36： [H1、H2、H3、 H4、H5、H6]プロパティ家族フォントが存在しません：継承

これは次のようになります。font-family: inherit;

ライン167： [.carousel-指標李]プロパティボーダー-raidusは存在しません：10pxのは

これは次のようになります。border-radius: 10px

ライン221： [.carousel-キャプションBTN]エラーを解析する（0 0 15ピクセルのRGBA（0,0,0,002）

これは次のようになります。

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

ライン233： [.carousel制御]プロパティテキストsahdowは存在しない：0 1ピクセル2ピクセルRGBA（0、0、0、0.6）

これがなければならない：text-shadow: 0 1px 2px rgba(0,0,0,0.6);

---

本物の問題は、221行目のbox-shadowプロパティです。その他のエラーはCSSファイルには影響しませんが、無視された後はすべてがルールになりました。

コードを書くときに注意してください。そうする前に検証してみてください。

CSS検証ツール：https://jigsaw.w3.org/css-validator/