Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Adaptive Thumbnail
<div class="col-md-3 col-sm-4">
<div class="my-thumbnail clearfix">
<img class="img responsive" alt="?thumbnail max width=300&url=http%3a%2f%2fcouleursapp" src="">
<div class="caption">
<h4 class="title" title="Coleurs">
<a href="" target="_blank">Coleurs</a>
<p class="tagline"> Simple app for grabbing & tweaking colors you see on screen.</p>
// General Thumbnail Setting
// breakpoint, 500, 768px
// 改成了2个media query
// 1. 以下为Twitter Bootstrap原来的代码, 只是改了下名字,thumbnail -> my-thumbnail, 不做Overwrite
@media (min-width: 768px){
.my-thumbnail {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
display: block;
line-height: 1.42857;
margin-bottom: 20px;
padding: 4px;
transition: border 0.2s ease-in-out 0s;
img {
display: block;
height: auto;
margin-left: auto;
margin-right: auto;
max-width: 100%;
.caption {
color: #333333;
padding: 9px;
//2. 以下为对应于手机新增的adaptive design
@media (max-width: 768px){
border-top: 1px solid #e6eaed;
padding-top: 15px;
padding-bottom: 15px;
float: left;
overflow: hidden;
width: 180px;
@media (max-width: 500px){
width: 80px;
.caption {
margin-left: 195px;
.title{margin-top: 0;}
@media (max-width: 500px){
margin-left: 90px;
@media (min-width: 500px){
height: 70px;
<link href="//" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.