使用 Bootstrap 创建响应式水平内容缩略图答案

【问题标题】：Creating a responsive horizontal content thumbnail with Bootstrap使用 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 完成。希望您现在可以提供帮助。谢谢。

标签： html css twitter-bootstrap thumbnails responsive

【解决方案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;
    }

【讨论】：