使用Bootstrap創建響應水平內容縮略圖

我在創建與Bootstrap中的Custom Content Thumbnail類似的響應「卡」時出現問題，但是處於水平狀態。主要的問題是我想要圖像是一個正方形和100％的卡高度。另外，我希望所有的卡都具有相同的寬度和高度。使用Bootstrap創建響應水平內容縮略圖

這是我的工作至今：

body { 
 
\t background-color:#ededed; 
 
\t font-family:"Segoe UI"; 
 
} 
 

 
/*----------2.Headings & Buttons----------*/ 
 
h3 { 
 
\t font-size:1.2em; 
 
\t font-weight:600; 
 
\t text-transform:capitalize; 
 
\t margin:0 0 10px 0; 
 
\t padding:0; 
 
\t color:#555555; 
 
} 
 
.btn-styled { 
 
\t background-color:transparent; 
 
\t border:#666666 1.9px solid; 
 
\t color:#666666; 
 
\t font-size:0.85em; 
 
\t border-radius:30px; 
 
\t padding:5px 13px 4px 13px; 
 
\t margin:10px 0 10px 0; 
 
} 
 
.btn-styled:hover, .btn-styled:active { 
 
\t background-color:#ededed; 
 
\t border-color:#ededed; 
 
\t color:#555555; 
 
} 
 
.btn-styled:focus { 
 
\t outline:0 !important; 
 
} 
 
/*----------3.Cards----------*/ 
 
.card { 
 
\t position: relative; 
 
    \t margin:2% 5px 2% 5px; 
 
    \t background-color: #fff; 
 
    \t transition: box-shadow .25s; 
 
    \t border-radius: 2px; 
 
    \t box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); 
 
\t padding:0; 
 
\t min-width:400px; 
 
\t 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 { 
 
\t height:100px; 
 
\t width:100px; 
 
} 
 

 
.card.horizontal { 
 
    \t display: -webkit-flex; 
 
    \t display: -ms-flexbox; 
 
    \t display: flex; 
 
} 
 
.card.horizontal.small .card-image, 
 
.card.horizontal.medium .card-image, 
 
    .card.horizontal.large .card-image { 
 
    \t height: 100%; 
 
    \t max-height: none; 
 
    \t overflow: visible; 
 
} 
 
.card.horizontal .card-image img { 
 
    \t width:150px; 
 
\t height:150px; 
 
\t margin-right:20px; 
 
} 
 
.card.horizontal .card-stacked { 
 
    \t -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    \t -webkit-flex: 1; 
 
    -ms-flex: 1; 
 
    flex: 1; 
 
    \t position: relative; 
 
} 
 
.card.horizontal .card-stacked .card-content { 
 
    \t -webkit-flex-grow: 1; 
 
    -ms-flex-positive: 1; 
 
\t 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>

而且，我做的卡應如何看待在網格中的例子：

當我試圖創建這些卡，他們沒有響應。在不同的屏幕寬度上，左右邊距太大或者彼此重疊。

有人可以幫助開始或給我一些想法我應該怎麼做嗎？在此先感謝。

來源

2016-09-13 rondeitch

請提供一些代碼，代表到目前爲止你所取得的成就，幫助你會容易得多。一個jsfiddle將是一個很好的補充。 – Yoda

@Yoda完成。希望你現在可以幫忙。謝謝。 – rondeitch

使用引導程序。 IHAVE提供了一個演示鏈接只是實驗的代碼和閱讀引導的文檔，以獲得更好的理解

這是你的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; 
    }

來源

2016-09-13 13:03:05

使用Bootstrap創建響應水平內容縮略圖

回答

相關問題