css - Bootstrap 3 Carousel 仅半响应。诡异的

Question

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

http://windstarwd.com/testman/

查看上面的页面，然后缩小你的浏览器，你就会看到问题

对于“页面标题”(在导航栏上方)，我能够通过添加以下内容来响应电话号码 (h2):

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

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

时 16x16

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

Answer 1

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

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

或者使用第二个第二个图标栏，如果屏幕尺寸太小，隐藏大图标栏，使用 Bootstrap 属性 .visible-sm 和 .hidden- sm ( bootstrap doc ).

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

希望我对你有帮助。