如何使用 bootstrap 表单控件和下拉列表 类 包装显示在 <div> 中的文本？

Question

我有一个 razor 页面，我在其中显示 div 标记中的下拉菜单中的所选项目列表。如果所选项目列表超过 div.

的大小，如何让 @FormattedText 自动换行

我尝试应用自动换行和白色-space 样式，但均无效。内容超出 并且显示滚动条。如何将内容包装在 ?感谢您的任何建议！

<style>
    .dropdown {
       word-wrap: normal;
       white-space: normal;
    }
</style>


<div class="form-control col-md-4 dropdown dropdown-toggle">
        @FormattedText

        <div class="dropdown-menu">
            @foreach (var item in Items)
            {
                <div>
                    <input type="checkbox" @bind="item.IsUpdated" />
                    <label for="@item.Name">@item.Name</label>
                </div>
            }
        </div>
</div>

List<string> selectedItems = new List<string>();

public string FormattedText
{
    get
    {
        selectedItems.Clear();

        selectedItems.AddRange(Items.Where(s => s.IsUpdated).Select( item => { return item.Name; }));
        
        if (selectedItems.Any())
        {
            return string.Join(",", selectedItems.ToArray());
        }
     }

    set
    {
        selectedText = value;
    }
}

Answer 1

首先，你的Bootstrap.dropdown结构不正确。如果看their examples，.dropdown-toggler和.dropdown-menu需要同级，被.dropdown包起来。 .dropdown-menu 中的每个项目也需要 .dropdown-item class。

因此您需要将结构更改为：

<div class="form-control col-md-4">
    <div class="dropdown">
        <button type="button" class="btn btn-secondary dropdown-toggler"
          data-toggle="dropdown">
            @FormattedText
        </button>
        <div class="dropdown-menu">
            @foreach (var item in Items)
            {
                <div class="dropdown-item">
                    <input type="checkbox" @bind="item.IsUpdated" />
                    <label for="@item.Name">@item.Name</label>
                </div>
            }
        </div>
</div>

它将看起来像这样：

之所以在按钮中换行的格式化文本没有换行是因为 .dropdown-toggler 具有样式 white-space: nowrap;。您可以摆脱那种风格或在 .dropdown-toggler

上使用 Bootstrap 实用程序 class .text-wrap

<div class="form-control col-md-4">
    <div class="dropdown">
        <button type="button" class="btn btn-secondary dropdown-toggler text-wrap"
          data-toggle="dropdown">
            @FormattedText
        </button>

    ...

</div>

最后，下拉菜单超出了 .form-control 的边界。那是因为 .form-control 有一个固定的高度。您可以将其高度样式设置为自动，或使用 Bootstrap utility class .h-auto:

<div class="form-control col-md-4 h-auto">
    <div class="dropdown">
        <button type="button" class="btn btn-secondary dropdown-toggler text-wrap"
          data-toggle="dropdown">
            @FormattedText
        </button>

    ...

</div>

现在整个事情看起来像这样：

演示： https://jsfiddle.net/davidliang2008/3bykc4rf/14/