使用 Bootstrap 创建响应式水平内容缩略图
Posted
技术标签:
【中文标题】使用 Bootstrap 创建响应式水平内容缩略图【英文标题】：Creating a responsive horizontal content thumbnail with Bootstrap 【发布时间】：2017-01-21 01:54:02 【问题描述】：我在创建与 Bootstrap 中的 Custom Content Thumbnail 类似但水平的响应式“卡片”时遇到问题。主要问题是我希望图像是正方形并且是卡片高度的 100%。另外，我希望所有卡片都具有相同的宽度和高度。
这是我目前的工作：
body
background-color:#ededed;
font-family:"Segoe UI";
/*----------2.Headings & Buttons----------*/
h3
font-size:1.2em;
font-weight:600;
text-transform:capitalize;
margin:0 0 10px 0;
padding:0;
color:#555555;
.btn-styled
background-color:transparent;
border:#666666 1.9px solid;
color:#666666;
font-size:0.85em;
border-radius:30px;
padding:5px 13px 4px 13px;
margin:10px 0 10px 0;
.btn-styled:hover, .btn-styled:active
background-color:#ededed;
border-color:#ededed;
color:#555555;
.btn-styled:focus
outline:0 !important;
/*----------3.Cards----------*/
.card
position: relative;
margin:2% 5px 2% 5px;
background-color: #fff;
transition: box-shadow .25s;
border-radius: 2px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
padding:0;
min-width:400px;
max-width:500px;
.card .card-image img
display: block;
border-radius: 2px 2px 0 0;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
.card .card-content
padding: 15px 10px 0 0;
border-radius: 0 0 2px 2px;
.card .card-content p
margin:0;
font-size:1.45rem;
color: #555555;
/*----3.a.Horizontal----*/
.card.horizontal .card-image img
height:100px;
width:100px;
.card.horizontal
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
.card.horizontal.small .card-image,
.card.horizontal.medium .card-image,
.card.horizontal.large .card-image
height: 100%;
max-height: none;
overflow: visible;
.card.horizontal .card-image img
width:150px;
height:150px;
margin-right:20px;
.card.horizontal .card-stacked
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
position: relative;
.card.horizontal .card-stacked .card-content
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
.card .card-image
position: relative;
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-1">
<h3>MAIN TITLE</h3>
</div>
</div>
<div class="row">
<div class="col-md-offset-1 col-md-5 col-xs-12">
<div class="card horizontal">
<div class="card-image">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/f/ff/Morning_Glory_Flower_square.jpg/1024px-Morning_Glory_Flower_square.jpg">
</div>
<div class="card-stacked">
<div class="card-content">
<h3>Title Goes Here</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor incididunt.</p>
<button class="btn btn-styled">START COPY</button>
</div>
</div>
</div>
</div>
<div class="col-md-offset-1 col-md-5 col-xs-12">
<div class="card horizontal">
<div class="card-image">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/f/ff/Morning_Glory_Flower_square.jpg/1024px-Morning_Glory_Flower_square.jpg">
</div>
<div class="card-stacked">
<div class="card-content">
<h3>Title Goes Here</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor incididunt.</p>
<button class="btn btn-styled">START COPY</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>另外，我做了一个例子来说明卡片在网格中的外观：
当我尝试创建这些卡片时，它们没有响应。在不同的屏幕宽度上，左右边距太大或彼此重叠。
有人可以帮助开始或给我一些建议吗？ 提前致谢。
【问题讨论】：
请提供一些代码来代表您到目前为止所取得的成就，这样对您有帮助会容易得多。一个 jsfiddle 将是一个很好的补充。 @Yoda 完成。希望您现在可以提供帮助。谢谢。 【参考方案1】：使用引导程序。我提供了一个演示链接，只是对代码进行了实验，并阅读了 bootstrap 的文档以更好地理解
这是你的Demo Link
HTML 代码
<div class="container">
<div class="col-md-4">
<div class="card">
<div class="image pull-left">
</div>
<div class="content pull-left">
<h4>
Title Goes Here
</h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<button class="btn btn-default btn-read">
Read more
</button>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
Css 代码
.card
background: #fff;
display: inline-block;
border: 1px solid #ddd;
.image
float: left;
background: #000;
width: 25%;
height: 150px
.content
float: left;
height: 140px;
width: 73%;
overflow: hidden;
padding: 5px;
.content h4
margin: 5px 0;
【讨论】：
以上是关于使用 Bootstrap 创建响应式水平内容缩略图的主要内容，如果未能解决你的问题，请参考以下文章