Bootstrap：响应式面板和图像

Question

在我的页面中我有一个面板和2个图像，我设置这些类响应但它不起作用。 这是我的代码：

JSFIDDLE

我该如何解决？

编辑：

Answer 1

问题是您已将profile-image类设为width:1000px

如果您使用硬编码值设置css，则无法将其设置为响应式布局，因为您未在任何media-query

下提供该布局

我删除了width:1000px和 seems to work fine here

.profile-image{
    margin: 50px auto !important;
    text-align: center !important;
    position: relative;
   /* notice that "width" has been removed*/
}

如果您坚持使用width:1000px，请将其包装在media-query：

下

  @media only screen 
    and (min-width : 1224px) {
      .profile-image{
        margin: 50px auto !important;
        text-align: center !important;
        width: 1000px;
        position: relative;
    }
}

demo here

修改

由于您在自定义CSS中的规则

，因此Panel无法正常工作

.person-info{
    float: right;
    margin: -40px 71px -40px auto; /* this wrapper here is 
                                  pushing it 40px left of
                                   screen and hence responsiveness is lost totally */
    width: 808px; /* avoid fixed width without media-query*/
}

删除它们，然后 see it working （添加红色边框以显示大纲以供演示）