跨度和Bootstrap的布局问题3

Question

TB3在这里。这是各自的jsFiddle。我正在尝试构建一个具有以下布局的 minitron （迷你jumbotron）：

如您所见，给定<div>类的主minitron。每个＆＃39; minitron＆＃39;有：

• 图标（Glyphicon）
• 姓名
• 说明
• A＆＃39;了解详情＆＃39;按钮

不幸的是我的CSS-fu非常弱，正如你可以在那个小提琴中看到的那样，我只是没有达到理想的布局。

这是我尝试一些CSS规则：

.minitron-icon {
    width:20%;
    height: 20%;
    margin: 5px;
}
.minitron-name {
    font-size: 18px;
}
.minitron-desc {
    width: 80%;
    margin: 5px;
}
.minitron-learnmore {
    width: 95%;
}

有人可以找到我出错的地方吗？

Answer 1

这个怎么样？ https://jsfiddle.net/oh69hq71/17/

利用行和列的BS网格系统。第一行包含glyphicon和name / description，另一行包含了解更多全宽。

    <div class="well minitron">
    <div class="row">
      <div class="col-xs-2">
        <span class="glyphicon glyphicon-piggy-bank minitron-icon"></span>
      </div>
      <div class="col-xs-10">
        <div class="row">
          <span class="minitron-name">Some Name</span>
        </div>
      <div class="row">
        <span class="minitron-desc">A short meaningful description goes here.</span>
      </div>
  </div>

    <div class="row">
      <div class="col-xs-12">
        <button class="minitron-learnmore btn btn-success" type="button">LEARN MORE ABOUT JUPITER!</button>
      </div>
    </div>
 </div>

<强> *更新：

• 增加glyphicon大小：在glyphicon span中将其样式设置为“font-size：1.5em;”

• 要使其更接近名称和描述，请在glyphicon div容器中添加style =“text-align：right”

• 描述与没有原始css样式的命名对齐。

• 要增加了解更多按钮和说明/图标之间的填充（或边距），请增加了解更多div top margin

新小提琴：https://jsfiddle.net/oh69hq71/18/