Question

我试图在我的网站顶部设置一个品牌文字+菜单，以缩小字体大小，因为窗口更大/更小，与其他引导内容相同（例如h1，p）是在做。最好的方法是什么？

此外，当窗口较小时，我仍然希望尽可能长时间地显示彼此相邻的菜单项而不是彼此之下。但我无法弄清楚如何在导航栏元素中使用col-md规则。这应该以另一种方式完成吗？

我遇到的另一个问题是，我想在导航栏中使用容器流体，以便将项目完全对齐到屏幕的右侧，但它似乎不会出现与我正在使用的文本权利结合使用，只是搞砸了。这里有任何提示或更好的方法来达到所有这三个目标吗？

我的代码目前看起来像：

<nav class="navbar navbar-inverse navbar-fixed-top">

            <a class="navbar-brand" href="#">Thonis</a>

        <div class="container text-right">  <!-- Fluid seems to break the menu on mobile, how to fix? -->

            <ul class="nav navbar-nav navbar-right">
                <li><a class="active" href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

        </div>
    </nav>

请在此处查看wip / demo http://www.antoniothonis.com/thonis/

Answer 1

使用

看一下这篇文章：Font scaling based on width of container

除非必要，否则不要崩溃

在bootstrap网站上：http://getbootstrap.com/components/#navbar-default 在溢出内容中，他们提到了这一点：

更改导航栏在折叠模式和水平模式之间切换的点。自定义@ grid-float-breakpoint变量或添加自己的媒体查询。

菜单项完全对齐

您可以按照此处所述制作课程container-full： 100% width Twitter Bootstrap 3 template

Answer 2

使用CSS媒体查询！ http://www.w3schools.com/css/css_rwd_mediaqueries.asp

问题＃1，例如：

UIElement.BeginAnimation

或者代替％，使用rem代替定义font-size：https://snook.ca/archives/html_and_css/font-size-with-rem。

对Q2使用相同的方法：例如：

@media screen and (max-width: 480px) {
    nav a {
         font-size:80%;
    }
}

具有动态字体大小调整和容器流体的Bootstrap导航栏？

2 个答案: