twitter-bootstrap 使用 Bootstrap 创建响应式水平内容缩略图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39470438/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a responsive horizontal content thumbnail with Bootstrap
提问by rondeitch
I'm having a problem creating a responsive "card" similar to the Custom Content Thumbnailin Bootstrap but horizontal. The main problem is that I want the image to be a square and 100% of the height of the card. Also, I want all the cards to have the same width and height.
我在创建类似于Bootstrap 中的自定义内容缩略图但水平的响应“卡片”时遇到问题。主要问题是我希望图像是一个正方形，并且是卡片高度的 100%。另外，我希望所有的卡片都具有相同的宽度和高度。
This is my work so far:
这是我迄今为止的工作：
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>Also, I made an example of how the cards should look in a grid:
另外，我举了一个例子，说明卡片在网格中的外观：
When I tried to create this cards they were not responsive. On different screen widths the left-right-margin was too big or they were on top of each other.
当我尝试创建这张卡片时，他们没有响应。在不同的屏幕宽度上，左右边距太大或它们彼此重叠。
Can someone help get started or give me some ideas how I should do it? Thanks in advance.
有人可以帮助入门或给我一些我应该如何做的想法吗？提前致谢。
回答by Atal Kishore
use bootstrap. Ihave provided a demo link just experiment with the code and read the documentation of bootstrap to get better understanding
使用引导程序。我提供了一个演示链接，只是试验代码并阅读引导程序的文档以更好地理解
Here is your Demo Link
这是您的演示链接
Html Code
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 code
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;
}
