引导元素未隐藏答案

【问题标题】：Bootstrap element not hidden引导元素未隐藏
【发布时间】：2018-05-14 18:24:36
【问题描述】：

我想隐藏小型设备（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>

【问题讨论】：

如果你使用了 awosome 字体：你必须修复 <i class="fas fa-search"></i> 到 <i class="fa fa-search"></i>

标签： html css twitter-bootstrap responsive-design

【解决方案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）
中型设备 - 台式机 (≥992px)
大型设备 - 台式机 (≥1200px)

【讨论】：

它现在可以工作了......我缩小了浏览器的大小并且它不工作了。它一直在那里。
您想在设备为 SM 时隐藏 .btn-header 部分？
我想在设计为 SM 时隐藏搜索框
我已经编辑了代码。请检查，现在当设备是 sm 时按钮是隐藏的，你应该编写 js 代码来根据需要显示搜索框，你可以像 jquery 代码一样使用 $('.fas.fa-search').slideToggle() /跨度>

【解决方案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/

【讨论】：

tnx 它工作！ :)