Question

我目前正致力于使用集成在TYPO3中的bootstrap来制作静态设计。我开始创建导航栏并遇到了第一个问题。

Current layout (resized window, smaller) 请注意社交媒体按钮是如何跳出导航栏的？我希望在这一点上完全隐藏它们。

当调整范围更大到更小的宽度时，搜索字段也是如此 - 在某个窗口宽度处跳出导航栏。我希望保持这一点，直到导航栏切换到折叠状态，例如iPad（768x1024），你仍然可以搜索。

我的html模板现在

我会调整模板，使其不包含TYPO3变量，但生成的输出将在没有TYPO3的情况下使用：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>

    <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Port</a></li>
            <li><a href="#">Prrrrrrrrriint</a></li>
        </ul>

        <div class="col-sm-3 col-md-3">
            <form class="navbar-form" action="suchergebnisse">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Suche" name="q" id="srch-term">
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="submit" name="cmd" id="submit"><i class="glyphicon glyphicon-search"></i></button>
                    </div>
                </div>
            </form>
        </div>

        <ul class="nav navbar-nav navbar-right">
            <li><a class="link" id="link-youtube" href="#" title="#" target="_blank"></a></li>
            <li><a class="link" id="link-googleplus" href="#" title="#" target="_blank"></a></li>
            <li><a class="link" id="link-twitter" href="#" title="#" target="_blank"></a></li>
            <li><a class="link" id="link-facebook" href="#" title="#" target="_blank"></a></li>
        </ul>
    </div><!--/.nav-collapse -->
</div>

我尝试过与倒塌的课程一起玩，但是暂时离开twitter-bootstrap业务对我来说并不好。我很感激您的任何暗示！

Answer 1

为了更快地进行移动设备开发，请使用这些实用程序类通过媒体查询按设备显示和隐藏内容。还包括用于在打印时切换内容的实用程序类。

了解更多信息Bootstrap Doc

根据您的要求为hide html元素添加以下bootstrap类。

hidden-xs for Phones (<768px) resolution 
hidden-sm for Tablets (≥768px) && Desktops (<992px) resolution
hidden-md for Desktops (≥992px) && Desktops (<1200px)resolution
hidden-lg for Desktops (≥1200px) resolution

在阈值

1 个答案: