正在填充Bootstrap中的可用空间

Question

我正试图用Bootstrap呈现一个项目列表。每个项目将显示一个图标、一些左对齐的内容和一些右对齐的内容。它看起来像这样：

+----------------------------------------------------------+
|                    Peyton Manning                Denver  |
|  [vertically       QB                           Broncos  |
|   centered icon]   #18                                   |
|                    Tenesee                               |
+----------------------------------------------------------+
|                    Andrew Luck             Indianapolis  |
|  [vertically       QB                             Colts  |
|   centered icon]   #7                                    |
|                    Stanford                              |
+----------------------------------------------------------+

为了做到这一点，我使用了一个ul列表内联。原因是图标会更小。它不会占用完整的引导程序列。但是，如果我使用内联列表，我不知道如何让其他列占据剩余的空间。我试过这个：

<div class="row">
  <div class="col-xs-12 col-sm-12 col-lg-12">
    <ul class="list-inline">
      <li>
        <i class="glyphicon glyphicon-tree-conifer" style="font-size:2.2rem; top:-10px;"></i>
      </li>
      <li>
        <h4 style="margin-top:4px;">Peyton Manning</h4>
        <div class="row">
          <div class="col-xs-8">
            <h5>QB</h5>
            <h5>#18</h5>
            <h5>Tennessee</h5>
          </div>
          <div class="col-xs-4 pull-right">
            <h5>Denver</h5>
            <h5>Broncos</h5>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 col-sm-12 col-lg-12">
    <ul class="list-inline">
      <li>
        <i class="glyphicon glyphicon-tree-conifer" style="font-size:2.2rem; top:-10px;"></i>
      </li>
      <li>
        <h4 style="margin-top:4px;">Andrew Luck</h4>
        <div class="row">
          <div class="col-xs-8">
            <h5>QB</h5>
            <h5>#7</h5>
            <h5>Stanford</h5>
          </div>
          <div class="col-xs-4 pull-right">
            <h5>Indianapolis</h5>
            <h5>Colts</h5>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

我不知道如何包括图标，然后抓住其余的空间，这样我就可以左对齐和右对齐该空间中的内容。有人能指引我朝正确的方向走吗？

谢谢！

Answer 1

在Bootstrap 3中，pull-left和pull-right类分别向左和向右浮动。

您可以使用这些和Bootstrap的网格系统，只需较少的标记即可获得所需的结果。

HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-1 text-center"> 
            <i class="glyphicon glyphicon-tree-conifer product-icon"></i>
        </div>
        <div class="col-xs-5">
            <div class="pull-left">
                 <h5>QB</h5>
                 <h5>#18</h5>
                 <h5>Tennessee</h5>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="pull-right">
                 <h5>Denver</h5>
                 <h5>Broncos</h5>
            </div>
        </div>
    </div>
</div>

CSS：

.product-icon { font-size:2.2rem; margin-top:20px;}

这是一个带有演示的jsfiddle。我只使用了colxs-*，但只是为了保持简单。

编辑：要使图标居中，您可以使用同样由Bootstrap提供的text-center类。将图标与CSS垂直对齐是不容易实现的，因为您主要担心的是div.row没有固定的高度。所以我给了它一个小的margin-top。