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

Question

我在创建与 Bootstrap 中的 Custom Content Thumbnail 相似但水平的响应式 "card" 时遇到问题。主要问题是我希望图像是正方形且占卡片高度的 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>

此外，我还举了一个卡片在网格中的外观示例：

当我尝试创建此卡片时，它们没有响应。在不同的屏幕宽度下，左右边距太大或彼此重叠。

有人可以帮助我入门或给我一些建议吗？提前致谢。

Answer 1

使用bootstrap。我提供了一个演示 link 只是试验代码并阅读 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 创建响应式水平内容缩略图

Creating a responsive horizontal content thumbnail with Bootstrap

html

css

thumbnails

twitter-bootstrap

responsive