Twitter bootstrap 3 “制作图片”；棍子；到缩略图标记的边框

我正在创建一个员工列表（每行2项），我遇到了几个问题：

• 我希望图片使用列表项左侧的全部空间-示例如下：
• 带有缩略图类的列表项的边框相互接触-我希望有一些填充

我在小提琴中的例子：

我的列表项目代码：

<div class="col-sm-6 col-xs-12 thumbnail">
    <div>
        <div class="col-xs-3"><img class="img-responsive" src="http://lorempixel.com/300/300/" /></div>
        <div class="col-xs-9">
            <div class="h4">Paul Smith</div>
            <div>Title: Developer</div>
            <div>Skills: C#, .NET</div>
        </div>
    </div>
</div>

保罗·史密斯
标题：开发商
技能：C#，.NET

我看到您正在使用缩略图，并将“col”直接放在col中

你可以考虑不使用缩略图：

<div class="col-sm-6 col-xs-12 listitem">
  <div class="row">
    <div class="col-xs-3"><img class="img-responsive" src="http://lorempixel.com/300/300/"/></div>
    <div class="col-xs-9">
        <div class="h4">Paul Smith</div>
        <div>Title: Developer</div>
        <div>Skills: C#, .NET</div>
    </div>
  </div>
</div>

我还添加了额外的

行

，以确保布局的一致性。您可能需要为mozilla和webkit添加边框半径的样式

.listitem {
  border-radius: 5px; 
  border: 1px solid black;
  overflow-y:hidden;
}

.listitem img {margin-left: -15px;}