带Bootstrap的新闻卡（标题，新闻，日期和图像）

Question

我想做出类似这样的事情，但我没有做任何事情。基本上我把所有东西放在一行然后使用列，但然后文本遍历图像。创建类似这样的东西的最佳方式是什么，以及它是否具有响应性？在大屏幕上，它看起来像这样，但在小屏幕上，图像以100％宽度覆盖文本。我不是要求代码，只是为了提示。感谢。

Answer 1

查看一些Bootstrap代码段网站以获取更好的方法。我建议使用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/