Question

我有一个使用Bootstrap 3的网站。在该网站中，我有一个项目列表。对于每个项目，我想显示一个图标。在图标的右侧，我想显示一些文字。目前，我有这个工作的少量文本。但是，当我的文本块增长时，它最终会到达文本块出现在图标下方而不是旁边的位置。

我创造了一个演示问题的小提琴here。代码如下所示：

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <ul class="list-inline">
        <li>[icon]</li>
        <li><div style="background-color:#ccc; padding:16px;">
           This is some text that should appear to the right of the icon.
           If this text is longer, it should wrap within this box.
        </div></li>
      </ul>
    </div>
  </div>   

  <br />

  <div class="row">
    <div class="col-md-4">
      <ul class="list-inline">
        <li>[icon]</li>
        <li><div style="background-color:#ccc; padding:16px;">
            Shorter blurbs appear beside like it should.
        </div></li>
      </ul>
    </div>
  </div>   

</div>

为什么第二个li始终出现在第一个li的右侧？

Answer 1

而不是让li元素并排出现。使用bootstrap Media object的现有组件（更多信息here）来实现它。

检查演示 Here

HTML：

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <ul class="list-unstyled">
        <li>
          <div class="media">
            <div class="media-left">
              <a href="#">
                <span class="media-object">
      <i class="fa fa-user fa-2x"></i>
      </span>
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">Media heading</h4> This is some text that should appear to the right of the icon. If this text is longer, it should wrap within this box.
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>


</div>

Bootstrap - 内联列表堆栈而不是水平排列

1 个答案: