css - bootstrap/ci 应用程序的媒体查询失败

Question

我正在尝试更改代码中的一些图像以使用类...以便我可以创建媒体查询。对我来说，第一步是将图像从我的 View 中“移动”到 css 文件中。

我正在尝试替换我认为的这段代码:(这段代码有效)

 94         <div class="item">
 95           <img src="assets/images/outside/front2.jpg" width="100%" height="300px" alt="">
 96           <div class="container">
 97             <div class="carousel-caption">
 98               <h1>Welcome to the test site</h1>
 99               <p></p>
100               <!--<p><a class="btn btn-lg btn-primary" href="#" role="button">push me</a></p>-->
101             </div>
102           </div>
103         </div>

有了这个:

 94         <div class="item"><div class="testclass"></div>
 95          <!-- <img src="assets/images/outside/front2.jpg" width="100%" height="300px" alt=""> -->
 96           <div class="container">
 97             <div class="carousel-caption">
 98               <h1>Welcome to the test site</h1>
 99               <p></p>
100               <!--<p><a class="btn btn-lg btn-primary" href="#" role="button">push me</a></p>-->
101             </div>
102           </div>
103         </div>

您会注意到，唯一不同的是我注释掉了图像，并添加了一个。我在 View 中包含了包含测试类定义的文件，如下所示:

 29     <!-- Custom styles for this template -->
 30     <link href="assets/css/carousel.css" rel="stylesheet">
 31     <link href="assets/css/ttest.css" rel="stylesheet">

ttest.css 看起来像这样:

  1 /* ### Media queries #### */
  2 .testclass {
  3   height: 100%;
  4   background-image: url(../images/outside/front2.jpg);
  5   background-repeat: no-repeat;
  6   background-size: contain;
  7   background-position-x: center;
  8 }

但是图像不会出现。在 F12 开发人员窗口中，我没有看到任何东西跳出来告诉我有错误。

文件结构是这样的:

dl@testbox [~/public_html/testapp.com/assets]$ ls -lah
total 24K
drwxrwxrwx 6 dl dl 4.0K Mar 24 16:52 ./
drwxrwxr-x 6 dl dl 4.0K Mar 25 03:43 ../
drwxrwxrwx 2 dl dl 4.0K Mar 26 18:01 css/
drwxrwxrwx 2 dl dl 4.0K Mar 24 16:48 fonts/
drwxrwxrwx 4 dl dl 4.0K Mar 24 16:52 images/
drwxrwxrwx 2 dl dl 4.0K Mar 24 16:52 js/

ttest.css 文件位于 assets/css 文件夹中...关于我可能做错了什么的任何提示？

Answer 1

你看不到图像是因为 .testclass 的渲染高度是 0px。

您需要为 .testclass 或 .item 设置固定高度。但是，为 .item 设置固定高度并将 .testclass 保留为 100% 将导致 .testclass 占据 的整个高度>.item，将.item的剩余内容下推。

从您之前的 img 元素来看，我猜这应该可行:

.testclass {
    height: 300px;
    ...
}

一些例子(假装绿色是你的背景图片):
当前的行为方式:jsfiddle
在 .item 上固定高度:jsfiddle
在 .testclass 上固定高度:jsfiddle