html - Bootstrap 元素未隐藏

Question

我想隐藏小型设备 (sm) 大小的搜索框，而不是搜索按钮。我希望我的搜索是这样的 sm 尺寸。 enter image description here

这是我的代码:

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

Answer 1

使用

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

设备列表

• 超小型设备 - 手机(<768 像素)
• 小型设备 - 平板电脑(≥768 像素)
• 中型设备 - 桌面设备(≥992 像素)
• 大型设备 - 桌面设备(≥1200 像素)