0
ブートストラップではなく水平でCustom Content Thumbnailに似たレスポンシブな「カード」を作成する際に問題があります。主な問題は、画像を正方形で、カードの高さの100％にすることです。また、すべてのカードの幅と高さを同じにしたい。ブートストラップで応答する水平コンテンツのサムネイルを作成する
これは、これまでの私の仕事です：
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>はまた、私はカードがグリッドにどのように見えるべきかの例を作った：
私は彼らが反応しなかったこのカードを作成しようとしました。画面の幅が異なると、左右のマージンが大きすぎるか、上下に重なり合っていました。
誰かが手始めにしたり、私がそれをどうすればいいか教えていただけますか？ ありがとうございます。
あなたが今までに達成したことは、あなたを助けることははるかに簡単です。 jsfiddleは素晴らしい追加です。 – Yoda
@Yoda Done。あなたが今助けることを願っています。ありがとう。 – rondeitch