Question

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    <style>
        .navbar-brand 
        {
            float:none;
        }
    </style>
    <script>
        $(function () {
            $("a.navbar-brand > div.text-center").mouseenter(function () {
                $(this).animate({
                    fontSize: "1.05em"
                }, 300);
            }).mouseleave(function () {
                $(this).animate({
                    fontSize: "0.95em"
                }, 300);
            });
        });
    </script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <a class="navbar-brand" href="~/Home/Index">

            <div class="text-center">
                <span class="glyphicon glyphicon-info-sign top"></span>
                    <b>Viswaprani Healing Center's Home Page</b>
           </div>
        </a>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
            </ul>
        </div> 
    </div>
    @RenderBody()
</body>
</html>

当输入鼠标并从此标题中保留Viswaprani Healing Center的主页同时导航栏高度更改。怎么阻止它？如何保持导航栏高度不变？请帮帮我。

Answer 1

给.navbar-brand一个行高，当文本最大时，它将适合：

.navbar-brand {
    float:none;
    line-height:25px;
}

Bootply

如何在不影响导航栏高度的情况下设置文本大小动画？

1 个答案: