Question

为了响应，我正在开发一个带有bootstrap（第一次）和php的网站。在页面的上半部分我想使用分为2个列（col-sm-3＆amp; 9）的行，较宽的一个占据图像轮播，另一个是未排序的列表，其中包含2个列表元素，一个图像，一个文字。现在我希望元素具有相同的高度，即旋转木马图像的（响应）高度的50％。旋转木马图像的列宽度为100％，因此当显示屏变小时，旋转木马的高度也会变小。因此，列表元素的高度必须相应减小。

<!-- Carousel Row -->
<div class="row" id="top">

  <!-- Sidebar -->
  <div class="col-sm-3 sidebar" id="sidebar">
    <ul class="nav navbar-nav-custom">
      <li class="logo">
        <img>
      </li>
      <li class="text">
        |
        |
      </li>
    </ul>
  </div>

  <!-- Carousel -->
  <div class="col-sm-9" id="carouselbar">
    <div id="carousel" class="carousel slide" data-ride="carousel">
      |
      |
    </div><!-- /.carousel -->
  </div>

</div>

我试图找到一个解决方案，但我没有成功，也无法在真正广泛的互联网搜索后找到解决方案。任何人都可以帮助我给这些列表元素一个响应的高度，最好只有CSS。

Answer 1

在下面的评论后编辑。

您可以通过将高度设置为0并将填充底部添加为百分比来获得响应高度。您需要根据纵横比调整实际百分比。

然后，您可以将文本添加为绝对定位的div，其高度为：100％，宽度为100％。

这是fiddle我必须使用媒体查询才能让高度保持在50％。

   <li class = 'text_holder'>
       <div id ='text'>
              My text here
       </div>
   </li>



      .text_holder {
     height: 0;
     padding-bottom: 85%;
     background-color: yellow;
    }
    #text {
     position: absolute;
     height: 100%;
     width: 100%;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     }

     @media (min-width: 992px) { 
     .logo {
     padding-bottom: 83%;
}
  .text_holder {
     padding-bottom: 83%;
    }
    }

    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) { 
          .logo {
     padding-bottom: 81%;
}
  .text_holder {
     padding-bottom: 81%;
    }
    }

对于图像，您只需使用与旋转木马相同的方法，给它一个基于百分比的宽度，高度将相应地缩放。

否则，您可以将较低分辨率的屏幕调整为较小的字体大小。您需要调整以下内容以适合您的实际设计。

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
.text {
  font-size: 1.1em;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
 .text {
 font-size: .8em;
  }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
 .text {
 font-size: .9em;
  }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
 .text {
 font-size: 1em;
  }
}

在垂直堆叠的li元素上均匀分布可用的响应高度

1 个答案: