Question

我正在将我的网站转换为Bootstrap 3并且有一个小的'语言切换器'，我曾经漂浮在右侧。如果你点击它，页面'神奇地'被翻译（它只是一个重定向到另一个页面）

enter image description here

如下所示，现有代码有点烦人，因为当没有足够的位置时，navbar-right元素会在两行上呈现。我没有找到任何优雅的解决方案，所以我正在考虑将语言切换器移动到页面上的另一个地方，不会受到尺寸变化的影响。

这是最好的做法吗？

或许将其移至另一个地方，在页脚中？我试图看看是否有带标志的图标，但没有。

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class=active><a id="tab-home1" href="Homepage.html"><span>HOME</span></a></li>
                <li><a href="http://blog.magerman.com"><span>BLOG</span></a></li>
                <li><a href="Services_Performance_Usability.html"><span>SERVICES</span></a></li>
                <li><a href="References.html"><span>REFERENCES</span></a></li>
                <li><a href="Partners.html"><span>PARTNERS</span></a></li>
                <li><a href="ContactUs.html"><span>CONTACT
                        US</span></a></li>
            </ul>


            <ul class="nav navbar-nav navbar-right">
                <li>
                    <div class="navbar-text">
                        <small>en | <a href="#" onclick="switchToGerman();return false;">de</a></small>
                    </div>
                </li>

            </ul>
        </div>

Answer 1

通常语言更改放在下拉列表中。试试这样：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li class="active"><a id="tab-home1" href="Homepage.html"><span>HOME</span></a></li>
            <li><a href="http://blog.magerman.com"><span>BLOG</span></a></li>
            <li><a href="Services_Performance_Usability.html"><span>SERVICES</span></a></li>
            <li><a href="References.html"><span>REFERENCES</span></a></li>
            <li><a href="Partners.html"><span>PARTNERS</span></a></li>
            <li><a href="ContactUs.html"><span>CONTACT
                        US</span></a></li>
        </ul>

        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Language <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">English</a></li>
                    <li><a href="#">Deutch</a></li>
                </ul>
            </li>
        </ul>
    </div>

Bootstrap 3 - 何处放置语言切换器？

1 个答案: