时间戳

首页 > 解决方案 > 引导元素未隐藏

html - 引导元素未隐藏

问题描述

我想隐藏小型设备（sm）大小的搜索框，而不是应该出现一个搜索按钮。我希望我的搜索在 sm 大小时是这样的。 在此处输入图像描述

这是我的代码：

    <div class="container">
        <div class="header">
            <div class="row">
                <div class="col-md-3 ">
                    <img src="img/1.png" class="header-logo" alt="site-logo">
                </div>
                <div class="col-md-6">
                    <div class="input-group search-box">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="fas fa-search"></i>
                            </span>
                        </div>
                        <input type="text" class="form-control" placeholder="جستجو">
                    </div>
                </div>

                <div class="col-md-3 btn-header">
                    <button class="btn">ورود</button>
                    <button class="btn">ثبت نام</button>
                </div>
            </div>

</div><!-- =====HEADER DIV===== -->
    </div>

标签： htmlcsstwitter-bootstrapresponsive-design

解决方案

利用

隐藏的sm

有关更多详细信息，请关注https://getbootstrap.com/docs/3.3/css/ 

            <div class="input-group search-box">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            <i class="fas fa-search"></i>
                        </span>
                    </div>
                    <!-- your search field is hidden in the sm -->
                    <input type="text" class="form-control hidden-sm" placeholder="جستجو">
                </div>

设备列表

  • 超小型设备 - 电话 (<768px)
  • 小型设备 - 平板电脑（≥768px）
  • 中型设备 - 台式机 (≥992px)
  • 大型设备-台式机（≥1200px）

推荐阅读