Элемент начальной загрузки не скрыт - PullRequest
Новая
       5

Элемент начальной загрузки не скрыт

0 голосов
/ 14 мая 2018

Я хочу скрытое окно поиска в размере небольших устройств (см), и вместо этого должна быть кнопка поиска.Я хочу, чтобы мой поиск был таким в см размере. введите описание изображения здесь

это мой код: 

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

Ответы [ 2 ]

0 голосов
/ 14 мая 2018

Чтобы показать или скрыть элементы с помощью начальной загрузки, вы должны использовать утилиты отображения. Например, если вы хотите показывать только на небольших устройствах, вы должны использовать 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/

0 голосов
/ 14 мая 2018

Использование

скрытые см

для получения более подробной информации следуйте 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 пикселей) </li>
  • Маленькие устройства - планшеты (≥768px)
  • Средние устройства -Desktops (≥992px)
  • Большие устройства -Desktops (≥1200px)
...