Question

我的bootstrap导航栏中有一个部分视图（btn-group），它显示来自MessageController的消息。我希望这个局部视图占据导航栏中的剩余空间。现在，btn-group局部视图根据传递给按钮的消息长度改变宽度，如下所示：

您可以想象，当存在长消息体时，这会导致问题，如下所示：

Navbar with partial btn-group view, long message body

如何使局部视图btn-group占用剩余的导航栏空间？我自己尝试了很多不同的代码更改，但到目前为止我没有运气。

以下是我的部分观点：

@using MyProject.UI.Helpers
@model IEnumerable<MyProject.Models.MessageModel>

<li class="btn-group">
    <a href="@Url.Action("Index", "Message")" class="btn btn-default">
        <span class="badge">@Html.Action("NumberOfMessages", "Message")</span> @Html.Action("MostRecentMessage", "Message")
    </a>
    <a class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="glyphicon glyphicon-chevron-down"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
        @{var count = 0;}
        @foreach (var item in Model)
        {
            count = count + 1;
            <li>@Html.MenuItem(item.Subject + ": " + item.Body, "Index", "Message")</li>
        }
        @if (count == 5)
        {
            <li>@Html.MenuItem("...", "Index", "Message")</li>
        }
    </ul>
</li>

这是导航栏代码（部分视图在@Html.Action（“NavbarMessages”，“消息”）列表项中调用）：

@using MyProject.UI.Helpers

<div class="navbar navbar-fixed-top navbar-default">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">
            <div class="logo">
                <img src="~/Content/myapp-logo.png" height="23" />
                My Application
            </div>
        </a>
    </div>

    <div class="navbar-collapse collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
            @Html.MenuItem("Home", "Home", "Home")
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Applications <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li class="dropdown-header">Setup</li>
                    @Html.MenuItem("SomeApp", "SomeApp", "Applications")
                    <li class="divider"></li>
                    <li class="dropdown-header">Apps</li>
                    @Html.MenuItem("App", "App", "Applications")
                    @Html.MenuItem("App", "App", "Applications")
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">System <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li class="dropdown-header">Security</li>
                    <li class="divider"></li>
                    @Html.MenuItem("Users", "UsersStuff", "Users")
                    @Html.MenuItem("Roles", "RolesStuff", "SecurityRoles")
                </ul>
            </li>
            <li>@Html.Action("NavbarMessages", "Message")</li>
        </ul>
        @if (HttpContext.Current.User.Identity.IsAuthenticated)
        {
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">@HttpContext.Current.User.Identity.Name <b class="glyphicon glyphicon-user"></b></a>
                    <ul class="dropdown-menu">
                        @Html.MenuItem("Change Password", "ChangePassword", "Security")
                        @Html.MenuItem("Logout", "Logout", "Security")
                    </ul>
                </li>
            </ul>
        }
    </div>

</div>

我已将我的控制器编辑为仅显示最新消息的75个字符作为临时解决方案。如果可能的话，我仍然想让这个btn-group大小占据空的导航栏空间。

提前感谢您的帮助。如果您还有其他需要，请告诉我。

Answer 1

我最终创建了一个navbar-form并将btn-group直接传递给了表单。我使用css将消息btn-group的宽度设置为静态，如下所示：

更改了部分视图

<li class="btn-group">
...
</li>

到

<div class="btn-group">
...
</div>

并在导航条代码中替换

<li>@Html.Action("NavbarMessages", "Message")</li>

在上面用

</ul>
<form class="navbar-form navbar-left">
@Html.Action("NavbarMessages", "Message")
</form>

非常简单的css：

.truncate-message {
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 500px;
}

我希望这有帮助！

在Bootstrap Navbar中的部分视图中设置列宽

1 个答案: