撤銷手機屏幕浮動

在我的桌面版本上，我使用float來設置兩個div彼此相鄰。在我的移動版本中，這些div中的一個不可見，所以我想撤消擁有它的浮動。撤銷手機屏幕浮動

如何在媒體查詢中「撤消」浮動？我試過float：none;並明確：兩者;但這不起作用。這是我的CSS代碼;

   .float { 
         float:left; 
         padding-right:10px; 
        } 

       @media (max-width: 900px) { 
       .float { 
         float:none !important; 
          text-align:center; 

        } 
       }

這是我的html代碼;

<div class="row"> 
       <div class="col-md-4 col-lg-4 col-sm-4"></div> 
       <div class="col-xs-12 col-sm-12 col-md-7 col-lg-7"> 
        <img src="assets/images/logo.png" class="float"> 
        <h1 style="padding-top:70px; padding-left:10px;" class="logo title">LIPSUM DOLOR</h1> 
        <h2 class="sub logo">Lorem ipsum dolor</h2> 
       </div><!-- end col --> 
</div><!-- end row -->

現在我使用twitter的引導程序，這就是爲什麼我使用列和行。寬度爲4的第一列在xs屏幕（手機）上不可見，所以不應該造成任何麻煩。它也沒有自定義樣式。

來源

2014-01-10 Jane

你試過'float：none'嗎？ – anpsmn

是的，我在我的問題中這麼說，但感謝您的幫助。 – Jane

對不起，我錯過了行 – anpsmn

您的媒體查詢代碼是錯誤的。它應該是

.row{ 
    text-align:center; 
} 
.float { 
    float:left; 
    padding-right:10px; 
} 

@media only screen and (max-width: 900px) { 
    .float { 
     float:none; 
    } 
}

來源

2014-01-10 14:12:15

媒體查詢工作不管，媒體查詢中的所有其他類相應地工作。但我會改變這一點。問題仍然沒有解決。在.row上設置文本對齊：中心會將我整個佈局中的所有文本設置爲居中，這不是我想要的。我只希望它集中在我的手機屏幕上，並且只有擁有該類的圖像纔會浮動。 – Jane

我添加行樣式只是您看到更改的一個示例。只是不要說，對此感到遺憾。這裏是jsfiddle http://jsfiddle.net/2sP4e/ –

我希望我可以upvote這兩次，因爲1）注意到媒體查詢中的錯誤，2）它免除了完全不必要的！重要的。 –

撤銷手機屏幕浮動

回答

相關問題