css - Bootstrap : responsive panel and image

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 中的规则，面板无法正常工作

.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 (为演示目的添加了红色边框以显示轮廓)