Bootstrap--响应式显示图片信息列表

HTML布局

<link href="~/Content/StyleSheet1.css" rel="stylesheet" />
<div class="row">
    <div class="col-sm-2 col-md-2" style="min-height:400px;border:1px #eee4e4 solid; border-radius:5px;padding-top:20px;">
        <ul class="nav nav-pills nav-stacked">
            <li class="active">
                <a href="#" class="text-muted">6346</a>
            </li>
            <li>
                <a href="#" class="text-muted">6346</a>
            </li>
            <li>
                <a href="#" class="text-muted">6346</a>
            </li>
        </ul>
    </div>
    <div class="col-sm-10 col-md-10" style="min-height:400px;border:1px #eee4e4 solid; border-radius:5px;padding-top:20px;">
        <div class="clearfix">
            <div class="pull-left">
                <a href="/course/explore/web?sort=latest" class="selected">最新</a>
                <a href="/course/explore/web?sort=popular">热门</a>
                <a href="/course/explore/web?sort=recommendedSeq">推荐</a>
            </div>
        </div>
        <div class="panel">
            <div class="panel-heading">文章列表</div>
            <div class="panel-body">
                <ul class="autumn-grids">
                    <li class="autumn-grid"><a href="#"> <img src="~/Images/246668449.jpg" class="img-rounded img-responsive"/></a>
                    <p class="clearfix"><a class="pull-left" href="#">王菲</a><a class="pull-right" href="#">收藏</a></p>
                    </li>
                    <li class="autumn-grid"><a href="#"> <img src="~/Images/246668449.jpg"  class="img-rounded img-responsive"/></a><p><a href="#">王菲</a></p></li>
                    <li class="autumn-grid"><a href="#"> <img src="~/Images/246668449.jpg"  class="img-rounded img-responsive"/></a><p><a href="#">王菲</a></p></li>
                    <li class="autumn-grid"><a href="#"> <img src="~/Images/246668449.jpg" class="img-rounded img-responsive"/></a><p><a href="#">王菲</a></p></li>
                    <li class="autumn-grid"><a href="#"> <img src="~/Images/246668449.jpg" class="img-rounded img-responsive"/></a><p><a href="#">王菲</a></p></li>
                    <li class="autumn-grid"><a href="#"> <img src="~/Images/246668449.jpg" class="img-rounded img-responsive"/></a><p><a href="#">王菲</a></p></li>
                    <li class="autumn-grid"><a href="#"> <img src="~/Images/246668449.jpg" class="img-rounded img-responsive"/></a><p><a href="#">王菲</a></p></li>
                    <li class="autumn-grid"><a href="#"> <img src="~/Images/246668449.jpg" class="img-rounded img-responsive"/></a><p><a href="#">王菲</a></p></li>
                </ul>
            </div>
        </div>
    </div>
</div>

　　CSS3元素

body {
}

.autumn-grids {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-right: -25px;
    letter-spacing: -4px;
    zoom: 1;
}

.autumn-grid {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: top;
    letter-spacing: 0;
    width: 130px;
    margin: 0px 10px 17px 0;
    background: #fff;
    padding: 0px;
}
.autumn-grid p {
    text-align:left;
    margin:0;
    padding:10px 0 5px 2px;
    }
    .autumn-grid:hover {
        border-top-color: #f78a4b;
    }

@media (min-width: 1200px) {
    .autumn-grid {
        width: 130px;
        margin: 0px 26px 17px 0;
    }
}

@media (min-width: 980px ) and ( max-width: 1199px ) {
    .autumn-grid {
        width: 120px;
        margin: 0px 20px 20px 0;
    }
}

@media (min-width: 768px ) and ( max-width: 979px ) {
    .autumn-grid {
        width: 120px;
        margin: 0px 20px 20px 0;
    }
}

@media ( max-width: 767px ) {
    .autumn-grids {
        margin-right: 0;
    }

    .autumn-grid {
        width: 100px;
        margin: 0px 20px 20px 0;
    }
}