搜索栏在小屏幕引导css上消失

我在网上买了一个react模板，我不明白为什么这个表单搜索栏隐藏在小屏幕上

 <div className="col-lg-8 col-xxl-4-5col d-none d-lg-block">
 <div className="header-search header-search-extended header-search-visible header-search-no-radius d-none d-lg-block">

我尝试将“d-none d-lg-block”更改为“d-block”，但仍然没有成功

我不是一个css专家，所以我需要一个工作环境来让它工作

以下是完整的div html代码：

我需要在所有屏幕大小上显示表单

<div className="header-middle">
        <div className={container}>
          <div className="row">
            <div className="col-auto col-lg-3 col-xl-3 col-xxl-2">
              <button className="mobile-menu-toggler">
                <span className="sr-only">Toggle mobile menu</span>
                <i className="icon-bars"></i>
              </button>
              <Link to={`${process.env.PUBLIC_URL}/`} className="logo">
                <img
                  src={`${process.env.PUBLIC_URL}/assets/images/logo.png`}
                  alt="Molla Logo"
                  width="105"
                  height="25"
                />
              </Link>
            </div>
            <div className="col col-lg-9 col-xl-9 col-xxl-10 header-middle-right">
              <div className="row">
                <div className="col-lg-8 col-xxl-4-5col d-none d-lg-block">
                  <div className="header-search header-search-extended header-search-visible header-search-no-radius d-none d-lg-block">
                    <Link to="#" className="search-toggle" role="button">
                      <i className="icon-search"></i>
                    </Link>

                    <form method="get" onSubmit={formSubmitHandler}>
                      <div className="header-search-wrapper search-wrapper-wide">
                        <div className="select-custom">
                          <select id="cat" name="cat">
                            <option value="">All Departments</option>
                            <option value="1">Fashion</option>
                            <option value="2">- Women</option>
                            <option value="3">- Men</option>
                            <option value="4">- Jewellery</option>
                            <option value="5">- Kids Fashion</option>
                            <option value="6">Electronics</option>
                            <option value="7">- Smart TVs</option>
                            <option value="8">- Cameras</option>
                            <option value="9">- Games</option>
                            <option value="10">Home &amp; Garden</option>
                            <option value="11">Motors</option>
                            <option value="12">- Cars and Trucks</option>
                            <option value="15">- Boats</option>
                            <option value="16">
                              - Auto Tools &amp; Supplies
                            </option>
                          </select>
                        </div>
                        <label htmlFor="q" className="sr-only">
                          Search
                        </label>
                        <input
                          onChange={inputChangeHandler}
                          type="search"
                          className="form-control"
                          name="q"
                          id="q"
                          placeholder="Search product ..."
                          value={search}
                          required
                        />
                        <button className="btn btn-primary" type="submit">
                          <i className="icon-search"></i>
                        </button>
                        <input
                         style={{display:"none"}}
                          type="file"
                          name="file"
                          onChange={onChangeHandler}
                          ref={imageInput}
                        />
                         <div className="btn btn-outline-primary" onClick={somethingtohappen}>
                          <i className="fa fa-camera"></i>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
                <div className="col-lg-4 col-xxl-5col d-flex justify-content-end align-items-center">
                  <div className="header-dropdown-link">
                    {/* <CompareMenu /> */}
                    <Link
                      to={`${process.env.PUBLIC_URL}/shop/wishlist`}
                      className="wishlist-link"
                    >
                      <i className="icon-heart-o"></i>
                      <span className="wishlist-count">
                        {props.wishlist.length}
                      </span>
                      <span className="wishlist-txt">Wishlist</span>
                    </Link>
                    <CartMenu />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

切换移动菜单
各部门
时尚
-女人
-男人
-珠宝
-儿童时尚
数码产品
-智能电视
-摄像机
-游戏
家居及；花园
马达
-轿车和卡车
-船
-汽车工具及配件；补给
搜寻
{/*  */}
{props.wishlist.length}
愿望者

此代码是否附带了一些css？在代码中有几个类名，我认为它们不是bootstrap-4的标准类名。可能是自定义css将搜索栏隐藏在较小的屏幕上。此外，正是搜索输入隐藏在较小的屏幕尺寸或搜索输入所在的整行上？基本上，您在多个位置上有

d-none&d-lg-block

，这会导致隐藏元素。请尝试删除

d-none

和

d-lg-block

。而且你的引导

className

在很多地方都是错误的，请修复它们。