Question

我有两列引导布局，我希望右列能够溢出容器。右列包含可能长字符串的列表，当li中的唯一元素是文本时，这不是问题，但是如果我想要做一个按钮，而li中的文本会导致行换行在一行显示按钮，在另一行显示文本。

有没有办法让列扩展到容器，即使有多个元素？

<div class="container">
  <div class="col-lg-6">
    This is the left column!
  </div>
  <div class="col-lg-6">
    <ul class="list-unstyled">
      <li>
        <ul>
          <li>List 1!</li>
        </ul>
      </li>
      <li>
        <ul>
          <li>List items may be reeeeeeeeeeeeeeeeeeealllly long, but that's ok!</li>
          <li>
            <span class="glyphicon glyphicon-refresh"></span> But when there are two elements it is a problem ..................................................... I don't want this wrap :(
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Answer 1

设置Bootstrap列的数量将决定容器的宽度以及任何嵌套元素。因此，默认情况下，文本将包装。

你可以尝试添加一个防止自动换行的CSS类，如下所示：

<div class="nowrap">Don't wrap this text.</div>

CSS：

.nowrap: {
   white-space: nowrap;
}

但是，这可能会导致布局或重叠问题，因为容器宽度随着内容的延长而扩展。

<强>更新

以下评论中的later JSFiddle与原始帖子中的示例HTML没有相同的标记。您忽略了提到您使用的是<button>标记，这些标记在当前CSS中不是内联元素。鉴于这样的标记：

<div class="btn-group">
  <button class="glyphicon glyphicon-refresh"></button>
  <button>Reeeeeeeeeeeeaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaallllllllllyyyyyyyyyy</button>
</div>

我相信以下CSS会给你带来理想的效果：

.btn-group {
  white-space: nowrap;
}

.btn-group button: {
  display: inline;
}

请参阅此JSFiddle，与您分开。

Bootstrap 3允许列溢出容器

1 个答案: