-1

我有这个标记：

 <ol class="carousel-indicators">

 <li data-target="#ShowCarousel-03" data-slide-to="0" class="active">
    <h4>Title</h4><br/><h5>Text</h5><br/><span>+</span>
 </li>

 <li data-target="#ShowCarousel-03" data-slide-to="1">
    <h4>Title</h4><br/><h5>Text</h5><br/><span>+</span>
 </li>

 <li data-target="#ShowCarousel-03" data-slide-to="2">
    <h4>Title</h4><br/><h5>Test</h5><br/><span>+</span>
 </li>

 <li data-target="#ShowCarousel-03" data-slide-to="3">
    <h4>Title</h4><br/><h5>Text</h5><br/><span>+</span>
 </li>

这个CSS：

.carousel-indicators li{
    display:block;
    float:left;
    background: url(images/triangle.png) no-repeat;
    width:320px;
    height:176px;
    cursor: pointer;
    text-align:center;
}

并且我的标记的容器 div 的宽度设置为100%

在我的实际分辨率（1366px 宽）上，li 元素对齐得很好，但是当我调整浏览器大小时，元素没有对齐。

我正在使用 twitter 引导框架。

我的问题是当分辨率较低时如何使这些元素缩放？

谢谢！

4

1 回答 1

1

对于响应式设计，您可以通过在代码中添加适当的类.span4 .span8等来在轮播中使用引导网格系统。它会根据浏览器的大小调整轮播的大小，但网格系统的固定大小可能不适合您的需求。然后你需要用你自己的 css 覆盖一些尺寸，但如果你已经在你的站点中使用了网格系统，这可能很难处理。

这是文档站点网格系统

第二种方法是使用emor %for your carousel elements size 和 body 元素。通过一些媒体查询http://www.w3.org/TR/css3-mediaqueries/您可以设置轮播在较低分辨率下的变化方式。1 em 通常等于 16px。计算新的 em 大小有点棘手，除以1父容器大小，whitch 是具有16px字体大小的 body 元素，然后乘以当前px大小：

1/16px*320px = 20em

CSS：

body {
    font-size:1em; /* 16px */
}

.carousel-indicators li{
    display:block;
    float:left;
    background: url(images/triangle.png) no-repeat;
    width:20em; /* 1/16px*320px = 20em */
    height:11em; /* 1/16px*176px = 20em */
    cursor: pointer;
    text-align:center;
}

提示。如果您希望也调用该背景图像，请使用background-size属性。

background-size:20em 11em;

低于 1170 像素的屏幕尺寸：

@media (max-width:1170px){
   body {
      font-size: 0.875em; /* 14px */
   }
@media (max-width:800px){
   body {
      font-size: 0.75em; /* 12px */
   }

您的li元素宽度将自动更改为0.875em*20em = 17.5em低于 1170 像素0.75em*20em = 15em的分辨率和低于 800 像素的分辨率。

希望有帮助！

于 2013-04-05T07:16:19.680 回答