ブートストラップのニュースカード（キャプション、ニュース、日付と画像）

Question

私はこれを何とかしようとしていますが、私は何もしません。基本的には、すべてを1つの行に入れてから列を使用しますが、テキストがイメージ上に表示されます。このようなものを作成し、それに対応するための最良の方法は何ですか？大画面では、このように見えますが、小さな画面では、画像は100％幅のテキストを表示します。私はコードを求めていない、ちょうどヒントです。ありがとう。

Answer 1

良いアプローチのためのいくつかのブートストラップスニペットサイトを見てみましょう。 bootsnipp.comを使用することをお勧めします。誰かがそこに同様のアプローチを掲示しました。それをあなたのコンセプトに適応させ、それをあなたのコンセプトに適応させる価値があります。http://bootsnipp.com/snippets/featured/beautiful-image-card-with-description

Answer 2

モバイルの最初のアプローチはデフォルトとしてモバイル状態を定義することです。次に、メディアクエリでデスクトップを定義します。例：

HTML：

<div class="container"> 
    <div class="row"> 
    <div class="col-md-12 newsitem"> 
     <img class="img-right" src="https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=Newsflash_500×700&w=500&h=700&fm=png" /> 
     <h1>About Me</h1> 
     <p>Lots of text here...With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and o</p> 
    </div> 
    </div> 

    <div class="row"> 
    <div class="col-md-12 newsitem"> 
     <img class="img-right" src="https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=Newsflash_500×700&w=500&h=700&fm=png" /> 
     <h1>About Me</h1> 
     <p>Lots of text here...With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and o</p> 
    </div> 
    </div> 
</div> 

CSS：

@import url('http://getbootstrap.com/dist/css/bootstrap.css'); 
.img-right { 
    width: 100%; 
    height: auto; 
} 
/*desktop*/ 
@media (min-width: 768px) { 
    .img-right { 
    float: right; 
    width: 200px; 
    margin: 0 0 20px 10px; 
    } 
    .newsitem { 
    padding: 20px 0; 
    border-top: 1px solid #ccc; 
    } 
} 

がここにアクションでそれを参照してください：このリンクhttp://jsfiddle.net/sud17ec6/1/