Как правильно расположить кнопки в сетке, чтобы быть отзывчивым

Question

Я использую react-strap карты . В приложении у меня много карточек, таких как экран печати ниже.

Проблема в том, что она выглядит не очень хорошо, потому что, когда я сжимаю приложение, все кнопки не сохраняют правильное положение, и вместо того, чтобы красиво обернуться, они кажутся странными.

Ниже описывается структура карты:

Приложение. js

        <div class="btn-toolbar">
            <Row>
                <Col>
                    <a class="btn btn-primary" role="button" href={example2}>
                        Project Notes
                    </a>
                </Col>
                <Col>
                    <a class="btn btn-primary" role="button" href={example2}>
                        Location Map
                    </a>
                </Col>
               {/* Other Cols... */}
            </Row>
            <Row style={{ marginTop: '20px' }}>
                <Col>
                    <a class="btn btn-primary" role="button" href={example2}>
                        Borrow Area Info
                    </a>
                </Col>
                <Col>
                    <a class="btn btn-primary" role="button" href={example2}>
                        Solicitation
                    </a>
                </Col>
               {/* Other Cols... */}
            </Row>
        </div>

Приложение. css

.btn-primary {
    display: inline-block;
    text-decoration: none;
    letter-spacing: var(--mainSpacing);
    color: var(--mainBlack);
    background: var(--shadowGreen);
    padding: 0.4rem 0.9rem;
    border: 3px solid var(--shadowGreen);
    transition: var(--mainTransition);
    text-transform: uppercase;
    cursor: pointer;
}

Что я сделал до сих пор:

Я думаю, что проблема может быть в файле .css , У меня нет никаких настроек, в частности для этого, потому что я не знаю, может ли быть затронута карта, кроме той, которую я выложил выше. Это проблема из-за отсутствия сетки? Если так, как я могу это исправить, чтобы кнопки могли хорошо оборачиваться при уменьшении / уменьшении размера приложения?

Большое спасибо за указание в правильном направлении.

Answer 1

Вот пример того, что я имею в виду.

.cardcontainer
{
  width:100vw;
  margin-bottom:20px;
}

.buttoncontainer
{
    width:100vw;
}

.button
{
  float:left;
  width:25%;
  margin-bottom:20px;
}

<div class="cardcontainer">
   <img src="https://images.pexels.com/photos/813011/pexels-photo-813011.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Italian Trulli">
</div>

<div class=buttoncontainer>
  <div class="button">
     <button type="button">Button</button> 
  </div>
   <div class="button">
     <button type="button">Button</button> 
  </div>
   <div class="button">
     <button type="button">Button</button> 
  </div>
   <div class="button">
    <button type="button">Button</button> 
  </div>
</div>

И скрипка

https://jsfiddle.net/4mfpr8kv/

Answer 2

У вас нет фиксированной ширины или высоты, установленной на css.

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

Затем для ваших карт установите ширину и высоту равными 100% родительского div, тогда это сохранит свой масштаб, и другие элементы будут красиво обтекать их.

Затем для кнопок, устанавливающих каждую из них внутри родительского элемента div, задайте также ширину родительского элемента div с оператором media screen.

Затем каждая кнопка должна быть помещена в контейнер шириной 25%. % и плавающий слева. Затем ягодицы будут масштабироваться и корректно корректироваться.