15

我正在学习引导程序。我想要一个带有下拉菜单的按钮，如下所示：

<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>，并根据文本的数量下降。

我怎样才能做到这一点？

我是否以错误的方式使用“下拉菜单”组件？

4

5 回答 5

35

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

示例小提琴

于 2013-07-26T17:30:48.997 回答
15

在 .dropdown-menu 中向锚标记添加正常的空白对我有用，仅将其添加到 .dropdown-menu 不起作用。 

.navbar .nav li .dropdown-menu li a {white-space: normal;}
于 2015-12-09T01:01:16.440 回答
3

您可以将此类添加到您的下拉项目中。这将在必要时换行文本。

.dropdown-item {
  white-space: pre-wrap;
}
于 2018-05-24T05:46:26.153 回答
2

这接近你所追求的吗？
http://www.bootply.com/69776

您会看到我稍微更改了 HTML 并添加了一个 CSS 类来限制下拉菜单的宽度。HTML 直接取自引导站点，并带有几个额外的按钮类。

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 sit amet, consectetur adipiscing elit. Vestibulum 
  non nulla eu dui imperdiet eleifend in vel ligula. Ut tempor gravida 
  leo. Sed in tellus justo. Nam vel nisl nulla. Proin sagittis semper 
  nunc et vehicula. Proin quam lacus, feugiat quis diam in, malesuada 
  posuere odio. Integer pharetra sed ante eget posuere. Nullam a 
  dapibus leo, vitae 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.
</ul>
</div>

CSS

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

希望这可以帮助！

于 2013-07-26T17:23:19.850 回答
0

不完全回答 OP 的问题，但值得，因为这是谷歌上排名靠前的帖子，用于包装下拉文本。任何寻找快速解决方案的人都可以让事情看起来不错并且下拉菜单不会出现乱序，只需添加一个width（如this SO Answer中所述）：

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

这修复了<select>（或任何用于下拉菜单的元素）的宽度

（请注意，下拉菜单中的项目仍然不会换行，但由于下拉菜单没有乱序，因此整体看起来更有序。此外，可能需要针对移动屏幕相应调整宽度）

于 2019-07-17T09:30:10.350 回答