html - 撤消移动屏幕的 float

Question

在我的桌面版本中，我使用 float 将两个 div 设置为彼此相邻。 在我的移动版本上，这些 div 之一不可见，所以我想撤消具有它的那个上的 float 。

如何“撤消”媒体查询中的 float ？我试过 float :无；并清除:两者；但这没有用。这是我的 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 的 Bootstrap ，这就是我使用列和行的原因。宽度为 4 的第一列在 xs 屏幕(移动设备)上不可见，因此不会造成任何问题。它也没有自定义样式。

Answer 1

您的媒体查询代码有误。应该是

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

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