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

Question

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

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

标签： cssbootstrap-4