Как я могу сделать содержимое в 2 столбца только на рабочем столе - PullRequest
Новая
       3

Как я могу сделать содержимое в 2 столбца только на рабочем столе

0 голосов
/ 06 апреля 2020

Таким образом, в основном на настольной версии 4 кнопки должны появляться группами по 2 в формате 2x2. Проблема в том, что на мобильном телефоне каждый должен иметь каждый отдельный ряд. Я использую bootstrap для манипулирования строк / столбцов и React для внешнего интерфейса. Я обычно работаю в бэк-энде, поэтому ничего не знаю со стороны html css. 

<div class="flex-row h-75">
            <div class="d-flex col-sm no-margin">
                <div class="d-flex justify-content-end col-sm p-1 p-lg-3 no-margin">
                    <div class="col-sm-6 no-margin">
                        <Link to="/profile">
                            <img src={Profile} alt="profile"/>
                        </Link>
                    </div>
                </div>
                <div class="d-flex justify-content-start col-sm p-1 p-lg-3 no-margin">
                    <div class="col-sm-6 no-margin">
                        <Link to="/logout">
                            <img src={Logout} alt="logout"/>
                        </Link>
                    </div>
                </div>
            </div>
            <div class="d-flex col-sm no-margin">
                <div class="d-flex justify-content-end col-sm-6 p-1 p-lg-3 no-margin">
                    <div class="col-sm-6 no-margin">
                        <Link to="/products">
                            <img src={Products} alt="products"/>
                        </Link>
                    </div>
                </div>
                <div class="d-flex justify-content-start col-sm-6 p-1 p-lg-3 no-margin">
                    <div class="col-sm-6 no-margin">
                        <Link to="/about">
                            <img src={About} alt="about"/>
                        </Link>
                    </div>
                </div>
            </div>
        </div>

Ответы [ 3 ]

1 голос
/ 06 апреля 2020

Посмотрите на эту страницу: https://getbootstrap.com/docs/4.0/layout/grid/ Вам необходимо использовать класс col-12 для каждого элемента

0 голосов
/ 07 апреля 2020

Сам выяснил, что, по словам Триши, было полуправо. Я изменил класс d-flex col-sm на класс строк, а затем изменил класс d-flex-es на col-lg-6, чтобы он отображался в столбцах только на больших экранах. Это сработало.

0 голосов
/ 07 апреля 2020

вы можете скопировать и сделать один для настольного компьютера с классом 'd-none d-md-block', а для маленького экрана вы можете использовать class = "d-block d-md-none"

...