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

使用

隐藏-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）

Answer 2

要使用引导程序显示或隐藏元素，您必须使用显示实用程序。例如，如果您只想在小型设备上展示，则必须使用d-none d-block d-sm-none。

您的代码将是这样的：

 <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 d-none d-md-block">
                    <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 d-sm-none">
                    <button class="btn">ورود</button>
                    <button class="btn">ثبت نام</button>
                </div>
            </div>

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

您可以在此处找到该文档：https://getbootstrap.com/docs/4.0/utilities/display/

Bootstrap元素未隐藏

2 个答案: