css - 填充 Bootstrap 中的可用空间

Question

我正在尝试使用 Bootstrap 呈现元素列表。每个元素都会显示一个图标、一些左对齐的内容和一些右对齐的内容。它看起来像这样:

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

在尝试这样做时，我使用了 ul 列表内联。之所以这样是因为图标会变小。它不会占用完整的 Bootstrap 列。但是，如果我使用内联列表，我不知道如何让其他列占用剩余空间。我正在尝试这个:

<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>

我不确定如何包含图标，然后捕获其余空间，以便我可以左对齐和右对齐该空间中的内容。有人可以 Bootstrap 我朝着正确的方向前进吗？

谢谢!

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;}

Here是一个带有演示的 jsfiddle。我只使用了 col-xs-* 但只是为了保持简单。

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