如何在移动/桌面模式之间切换时启用/禁用某些css属性？

Question

在bootstrap3的RWD页面中，如果我希望图像向右（或向左）浮动并使文本环绕它，并且在移动模式下，禁用浮动（或更改其他属性）值。如何实现呢？

例如，这就是我想要的宽屏幕：

<div style="float:LEFT; width: 300px ; margin-right:10px; margin-left:10px; padding:1px">
  <div class="caption">
    <h3>image header</h3>
  </div>
  <img class="img-responsive" src="http://placehold.it/300x150">
  <div class="caption">This is image footer</div>
</div>
<p>Lorem Ipsum is simply dummy text of ...</p>

一切正常。

但在移动设备中，我不希望文字包装图片＆＃39;影响。 （因为如果图像很宽，包装文本太窄，难以阅读）。

我必须在float模式下停用width和xs样式值。

但我不知道如何纠正实现此功能。这是我能想到的，非常愚蠢的：

<div style="float:LEFT; width: 300px ; margin-right:10px; margin-left:10px; padding:1px" 
     class="hidden-xs">
  <div class="caption">
    <h3>image header</h3>
  </div>
  <img class="img-responsive" src="http://placehold.it/300x150">
  <div class="caption">This is image footer</div>
</div>

<div style="margin-right:10px; margin-left:10px; padding:1px" class="visible-xs" >
  <div class="caption">
    <h3>image header</h3>
  </div>
  <img class="img-responsive" src="http://placehold.it/300x150">
  <div class="caption">This is image footer</div>
</div>
<p>Lorem Ipsum is ....</p>

它使用hidden-xs和visible-xs来实现这种效果，非常愚蠢。

欢迎任何有或W / O JS解决方案，非常感谢！

=============================================== =====

更新了

我通过引入block_float_left和block_float_right类部分解决了这个问题，如下所示：

<div class="thumbnail block_float_left">
  <div class="caption"><h3>image header</h3></div>
  <a href="#" >
    <img class="img-responsive" src="http://placehold.it/300x150" />
  </a>
  <div class="caption">This is image footer</div>
</div>

HTML中可能会block_float_left或block_float_right进行硬编码。在CSS中，我定义了：

@media (min-width: 768px) {   
    .block_float_left {
        float:left;
    }

    .block_float_right {
        float:right;
    }
}

@media (max-width: 768px) {    
    .block_float_left {
        float:none;
    }

    .block_float_right {
        float:none;
    }
}

部分工作，因为它无法处理width属性。

Answer 1

您需要使用media queries，以便可以更改不同屏幕尺寸的代码。假设您只是想删除浮动，那么我会做这样的事情。

注意：在我的示例中，我只使用了700px的任意大小，您可以根据需要更改它。

HTML：

<div>
  <img class="my-img" src="http://placehold.it/300x150">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam eligendi dolorum aspernatur odio iusto natus autem deleniti dolores laboriosam consequuntur, sint veniam corporis quod voluptas eius consequatur tempora quidem culpa.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam eligendi dolorum aspernatur odio iusto natus autem deleniti dolores laboriosam consequuntur, sint veniam corporis quod voluptas eius consequatur tempora quidem culpa.</p>
</div>

CSS：

.my-img {
  float:left;
}

@media (max-width: 700px) { 
  .my-img {
    float:none; 
  }
}

JSfiddle：here

Answer 2

您可以添加额外的课程并使用媒体查询。

https://jsfiddle.net/baykorhan/yjuL8d0y/1/