Question

我使用bootstrap3在旋转木马上遇到问题。图像本身是响应式的，但我很难弄清楚如何制作标题，按钮也响应。没有太多运气找到一个明确的答案。参见

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

对于“页面标题”（在导航栏上方）我能够通过添加以下内容来获取电话号码（h2）：

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

但是我在社交媒体图标堆叠和丢弃网站时遇到了麻烦，并且在移动设备中，旋转木马标题和按钮从顶部推开。将32x32社交图标正常显示是理想的，但16x16时则显示正常情况。 768px

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

Answer 1

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

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

或使用第二个第二个图标栏，如果屏幕尺寸太小，将显示该图标栏，隐藏大图标栏，其中包含引导属性.visible-sm和.hidden-sm（bootstrap doc）

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

希望我帮助过你。