在Bootstrap 3中以行为中心的图像

Question

我想创建这个布局：

<div class="row">
  <div class="col-md-4 col-sm-4 col-xs-4 line"></div>
  <div class="col-md-4 col-sm-4 col-xs-4"><img src="http://placepic.me/profiles/160-160" width="160" height="160" class="img-circle"></div>
  <div class="col-md-4 col-sm-4 col-xs-4 line"></div>
</div>

.line {
width:460px;
height:2px;
background:#CCC;
}

.img-circle {
  border-radius: 50%; 
}

http://jsfiddle.net/y8kcsr31/

我已经排成了行中的列，但它仍然无法正常工作。

编辑：对不起，我试图实现这个https://www.dropbox.com/s/bjg2z5wud4yzy4d/Screenshot%202014-11-13%2011.49.49.png?dl=0

Answer 1

你的小提琴不是引用引导程序。现在看看。
Updated Demo

和

.line {
height:2px;
background:#CCC;
}

就够了。

编辑： 你可以尝试这样的事情： - http://jsfiddle.net/y8kcsr31/10/

Answer 2

这是因为你在.line上有一个固定的宽度Bootstrap适用于百分比宽度，所以如果你把它拿出来就会并排坐着。

你可以在这里看到更新的jsfiddle（也引用Bootstrap） - http://jsfiddle.net/Tony_C/y8kcsr31/1/

Answer 3

OP的设计模式如下：

使用网格系统来完成此操作并不是获得所需结果的正确方法。

由于在Bootstrap中没有像这样的设计模式，让我们找到类似的东西：

.panel

会工作吗？ 了解详情：http://getbootstrap.com/components/#panels

DEMO：http://jsbin.com/yenade

HTML非常干净：

  <div class="panel panel-default panel-profile">
  <div class="panel-heading text-center clearfix">
    <h4>Name of Person</h4>
        <img src="http://placepic.me/profiles/50-50" class="img-circle">

    <a href="#">Edit Profile</a>    
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<强> CSS：

.panel-profile .panel-heading {
    position: relative;
}
.panel-profile .panel-heading  h4 {
    margin: 10px 0 20px;
    font-weight: normal;
}
.panel-profile .panel-heading img {
    margin: 0 auto 10px;
    display: block;
    border: 1px solid #ddd;
    background: #fff;
}
@media (min-width:400px) { 
    .panel-profile .panel-heading a {
        font-size: .75em;
        float: right;
    }
   .panel-profile .panel-heading {
    margin-bottom: 30px;
    }
  .panel-profile .panel-heading img {
        position: absolute;
        margin: 0;
        display: inline;
        bottom: -25px;
    }
}