Question

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

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

为了尝试这样做，我使用了ul list-inline。之所以是因为图标会更小。它不会占用完整的bootstrap列。但是，如果我使用list-inline，我不知道如何让其他列占用剩余空间。我正在尝试这个：

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

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

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

填充Bootstrap中的可用空间

1 个答案: