与媒体查询水平对齐 image/content

Question

我有一行带有标题和描述的图片，当 window 的宽度缩小到 991px 或更少时，列表应该是垂直的，标题和描述在图片的右侧, 不低于它。

<div class="row">
<div class="col-md-2">
    <img src="http://placehold.it/150x150">
     <h5 class="story-title">Title of the store goes here</h5>

     <h6>Description</h6>

</div>
<div class="col-md-2">
    <img src="http://placehold.it/150x150">
     <h5 class="story-title">Title of the store goes here</h5>

     <h6>Description</h6>

</div>
<div class="col-md-2">
    <img src="http://placehold.it/150x150">
     <h5 class="story-title">Title of the store goes here</h5>

     <h6>Description</h6>

</div>
<div class="col-md-2">
    <img src="http://placehold.it/150x150">
     <h5 class="story-title">Title of the store goes here</h5>

     <h6>Description</h6>

</div>
<div class="col-md-2">
    <img src="http://placehold.it/150x150">
     <h5 class="story-title">Title of the store goes here</h5>

     <h6>Description</h6>

</div>
<div class="col-md-2">
    <img src="http://placehold.it/150x150">
     <h5 class="story-title">Title of the store goes here</h5>

     <h6>Description</h6>

</div>

@media (max-width: 991px), (max-height: 460px) {
.col-md-2:hover {
    background-color: transparent;
}
.col-md-2 {
    display: inline-block;
    float: left;
}
}

JSFIDDLE

Answer 1

JSFiddle

您定位到错误的元素。您的容器不需要被推到 display: inline-block 或浮动。其中的元素做：

@media (max-width: 991px), (max-height: 460px) {
    .col-md-2:hover{
        background-color: transparent;
    }
    .col-md-2 img {
        float: left;    
    }
    .col-md-2 {
        overflow: auto;
    }
}

与媒体查询水平对齐 image/content

horizontally align image/content with media query

css

twitter-bootstrap

media-queries