0

我在使用 bootstrap3 的轮播时遇到问题。图像本身是响应式的，但我很难弄清楚如何使标题和按钮也响应式。没有太多运气找到明确的答案。看

http://windstarwd.com/testman/

查看上面的页面，然后将浏览器缩小，您将看到问题

对于“页眉”（导航栏上方），我可以通过添加以下内容来获得电话号码（h2）响应：

@media (max-width: 767px) {
  .my-header > div > h2 {
  font-size: smaller;
  }
}

但是我遇到了社交媒体图标堆叠和离开网站的问题，并且在移动设备中轮播标题和按钮被推离顶部。正常显示 32x32 社交图标是理想的，但 < 768px 时显示 16x16

所以我想我在这里有两个问题:(

4

1 回答 1

1

您可以对顶部按钮使用相同的媒体查询，例如

@media (max-width: 767px) {
  .socialIcons > img {
     width: 16px;
     height: 16px;
  }
}

或者使用第二个图标栏，如果屏幕尺寸太小，则会显示第二个图标栏，隐藏大图标栏，带有 bootstrap 属性 .visible-sm和.hidden-sm（bootstrap doc）。

对于轮播标题，您可以再次使用媒体查询在屏幕尺寸 < 768px 时设置不同的宽度，或者使用百分比而不是固定尺寸定义宽度。

希望我对你有所帮助。

于 2013-09-25T07:16:31.233 回答