jquery - 可折叠的标题菜单或在小屏幕中一个一个地排列按钮

Question

下面是包含 Logo 图像、6 个按钮和搜索框的页眉代码。我试图实现 Bootstrap 的可折叠类，但没有成功。我想在小屏幕的一列中将标题中的每个元素排列在彼此下方。

例如:-

普通屏幕 - Logo Button1 Button2.... Button6 Search

小屏幕 -
标志
按钮1
按钮2
..
搜索

在这种情况下，任何人都可以帮助我。

 <!-- header section - begin -->
            <header>
                <div  class="row-fluid" style="overflow:hidden">
                    <div class="col-md-2 col-lg-2 pull-left">
                        <div class="row-fluid">
                            <img class="pull-left" src="images/javabuzz_logo.png" alt="logo" id="logo">
                        </div>
                    </div>
                    <div class="col-md-8 col-lg-8">
                        <div class="row-fluid">
                            <button class="btn" id="main-menu" onclick="location.href='home.html'">Home <i class="fa fa-home" aria-hidden="true"></i></button>
                            <button class="btn" id="main-menu" onclick="location.href='about.html'">About Us <i class="fa fa-user-secret" aria-hidden="true"></i></button>
                            <button class="btn" id="main-menu" onclick="location.href='blog.html'">Blog <i class="fa fa-edit" aria-hidden="true"></i></button>
                            <button class="btn" id="main-menu" onclick="location.href='forum.html'">Forum <i class="fa fa-comments-o" aria-hidden="true"></i></button>
                            <button class="btn" id="main-menu" onclick="location.href='paid.html'">Paid Projects <i class="fa fa-credit-card" aria-hidden="true"></i></button>
                            <button class="btn" id="main-menu" onclick="location.href='contact.html'">Contact Us <i class="fa fa-envelope-o" aria-hidden="true"></i></button>
                        </div>
                    </div>

                    <div class="col-md-2 col-lg-2 pull-right">
                        <div class="row-fluid">
                            <div class="form-group input-group" style="margin-top:15px;">
                                <input id="search" placeholder="Here you search" class="form-control"/>
                                <span id="search-icon"class="input-group-addon"><i class="fa fa-search"></i></span>                     
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            <!-- header section - end -->

Answer 1

使用 bootstrap，您可以为不同的屏幕尺寸设置不同的列:

• col-lg = 大屏幕(更大的桌面)
• col-md = 中等屏幕(笔记本电脑、台式机)
• col-sm = 小屏幕(平板电脑)
• col-xs = 超小屏幕(手机)

如果您想要单独一行的内容，您可以使用所有可用的列，即 12，因此对于较小的设备，您可以使用 col-xs-12。

下面的代码已更改为删除您使用的行流体，而是更多地使用了列，主要用于您的按钮，简单地使它们保持一致，您可能需要更多地调整大小然而，对于那些人来说，一切都会崩溃成一个类似格式的列表。请看下面:

<!-- header section - begin -->
<header>
    <div  class="row" style="overflow:hidden">
        <div class="col-md-2 col-lg-2 col-xs-12 pull-left">
            <img class="pull-left" src="images/javabuzz_logo.png" alt="logo" id="logo">
        </div>
        <div class="col-md-8 col-lg-8 col-xs-12">
            <div class="col-md-2 col-xs-12">
                <button class="btn" id="main-menu" onclick="location.href='home.html'">Home <i class="fa fa-home" aria-hidden="true"></i></button>
            </div>
            <div class="col-md-2 col-xs-12">
                <button class="btn" id="main-menu" onclick="location.href='about.html'">About Us <i class="fa fa-user-secret" aria-hidden="true"></i></button>
            </div>
            <div class="col-md-2 col-xs-12">
                <button class="btn" id="main-menu" onclick="location.href='blog.html'">Blog <i class="fa fa-edit" aria-hidden="true"></i></button>
            </div>
            <div class="col-md-2 col-xs-12">
                <button class="btn" id="main-menu" onclick="location.href='forum.html'">Forum <i class="fa fa-comments-o" aria-hidden="true"></i></button>
            </div>
            <div class="col-md-2 col-xs-12">
                <button class="btn" id="main-menu" onclick="location.href='paid.html'">Paid Projects <i class="fa fa-credit-card" aria-hidden="true"></i></button>
            </div>
            <div class="col-md-2 col-xs-12">
                <button class="btn" id="main-menu" onclick="location.href='contact.html'">Contact Us <i class="fa fa-envelope-o" aria-hidden="true"></i></button>
            </div>
        </div>

        <div class="col-md-2 col-lg-2 col-xs-12 pull-right">
            <div class="form-group input-group" style="margin-top:15px;">
                <input id="search" placeholder="Here you search" class="form-control"/>
                <span id="search-icon"class="input-group-addon"><i class="fa fa-search"></i></span>                     
            </div>
        </div>
    </div>
</header>
<!-- header section - end -->

如有任何疑问或问题，请提出。