Question

我正在学习Bootstrap。我想要一个带下拉按钮，如下所示：

<div class="btn-group">
  <a class="btn dropdown-toggle btn-mini" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <div class="dropdown-menu" style="width: 300px;">
    <div >

  Long text goes here.

    </div>
  </div>
</div>

我的<div>代替下拉菜单，包含长文本和其他html标记。问题是我尝试了不同的CSS规则，长文本延伸到<div>之外或导致滚动条显示。我只是希望在<div>内很好地填充长文本，并根据文本的数量而下降。

我该怎么做？

我是否以错误的方式使用“dropdown-menu”组件？

Answer 1

只需将white-space: normal;添加到.dropdown-menu

即可

<强> Example fiddle

Answer 2

在.dropdown-menu中为锚标记添加white-space normal对我来说很有用，只是将它添加到.dropdown-menu没有用。

.navbar .nav li .dropdown-menu li a {white-space: normal;}

Answer 3

这是否接近你所追求的目标？
http://www.bootply.com/69776

您会看到我稍微更改了HTML并添加了一个CSS类来限制下拉列表的宽度。 HTML直接从the bootstrap site获取，并带有几个额外的按钮类。

HTML

<div class="dropdown">
<a class="btn btn-min dropdown-toggle" data-toggle="dropdown" href="#"> Action
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">

Lorem ipsum dolor坐下来，精神上的精神。 Vestibulum non nulla eu dui imperdiet eleifend in vel ligula。 Ut tempor gravida leo。在tellus justo的Sed。 Nam vel nisl nulla。 Proin sagittis semper nunc et vehicula。 Proin quam lacus，feugiat quis diam in，malesuada posuere odio。整数pharetra sed ante eget posuere。 Nullam dapibus leo，简历gravida ligula。 Praesent consectetur lorem et pellentesque imperdiet。 Suspendisse vitae libero auctor，pharetra nunc eu，laoreet dui。 Fusce posuere risus risus，id ultricies lectus aliquet et。 Nullam eget orci et mauris lacinia sollicitudin non vel felis。 Praesent eleifend risus et libero ultrices facilisis。

CSS

 .dropdown-menu{
 max-width:300px;
 }

希望这有帮助！

Answer 4

您可以将此类添加到下拉列表项中。这将在必要时包装文本。

.dropdown-item {
  white-space: pre-wrap;
}

Answer 5

不是完全回答OP的问题，但值得这样做，因为这是Google上排名较高的帖子，用于包装下拉菜单文字。任何正在寻找一种快速解决方案的人都可以添加一个width（如this答案中所述）：

<select id="something" class="bootstrap-select" style="width: 200px;">

这可以固定<select>（或下拉菜单中使用的任何元素）的宽度

（请注意，下拉列表中的项目仍不会包裹，但由于下拉列表不会乱序，因此整个外观看起来更加井井有条。此外，对于移动屏幕，宽度可能需要相应调整）

Bootstrap下拉列表：如何很好地进行文本换行

5 个答案: