Question

以下是包含徽标图片，6个按钮和搜索框的页眉的代码。我试图实现可折叠的Bootstrap类，但没有这样做。我想在小屏幕的列中将标题中的每个元素排列在彼此之下。

例如： -

正常屏幕 - 徽标按钮1按钮2 ....按钮6搜索

较小的屏幕 -
的标志
Button1的
BUTTON2
。。
搜索

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

 <!-- 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 -->

如有任何问题或疑问，请询问。

可折叠标题菜单或在小屏幕中排列另一个按钮

1 个答案: