Bootstrap заполнение карты на телефоне - PullRequest
Новая
       4

Bootstrap заполнение карты на телефоне

2 голосов
/ 30 марта 2020

Мне нужно добавить отступы к правой и левой сторонам карты в bootstrap, но я не могу это сделать. Вот код: (Bootstrap 4) 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 <section class="question-section">
            <div class="container">
                <div class="row padding-xs">
                    <div class="card shadow-lg rounded-lg" style="width: 30rem;">
                        <div class="pt-3">
                            <img class="card-img-top" src="question.svg" alt="Card image cap" height="128px" width="128px">
                        </div>
                        <div class="card-body">
                            <h5 class="card-title text-center">Jak budete zařízení využívat?</h5>
                          <p class="card-text text-center">Celodenní pracant nebo herní mašina?
                            Nebo jen nenáročné prohlížení internetu?</p>
                        </div>
            
                        <div class="input-group pr-3 pl-3 pt-3 pb-5">
                            <select class="custom-select" id="inputGroupSelect04">
                              <option selected>Vyberte...</option>
                              <option value="1">One</option>
                              <option value="2">Two</option>
                              <option value="3">Three</option>
                            </select>
                            <div class="input-group-append">
                              <button class="btn btn-outline-dark text-dark" type="button">Potvrdit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </section>

Ответы [ 3 ]

1 голос
/ 30 марта 2020

Предполагая, что вы имеете в виду 

<div class="card-body">

, добавьте классы pl-5 и pr-5 для заполнения слева и справа в 5px. 

<div class="card-body pl-5 pr-5">

"5" представляет число пикселей на площадку. Вы можете изменить это число по своему усмотрению.

https://mdbootstrap.com/snippets/jquery/mdbootstrap/880217

1 голос
/ 30 марта 2020

Заполнение в BS4 регулируется по следующим правилам:

Формула {заполнение} {стороны} - {размер} , где

p - устанавливает заполнение

Где стороны одно из:

t - устанавливает верхний отступ

b - устанавливает нижний отступ

l - устанавливает отступ слева

r - устанавливает отступы справа

x - устанавливает отступы слева и справа справа

y - устанавливает отступы сверху и снизу

пусто - устанавливает поля или отступы на всех 4 сторонах элемента

Где размер является одним из:

0 - устанавливает заполнение на 0

1 - устанавливает заполнение на .25rem (4 пикселя, если размер шрифта 16px)

2 - устанавливает отступ в .5rem (8px, если размер шрифта 16px)

3 - устанавливает padding в 1rem (16px, если размер шрифта 16px)

4 - устанавливает отступ в 1.5rem (24 пикселя, если размер шрифта 16px)

5 - устанавливает отступ в 3rem (48 пикселя, если размер шрифта 16px)

auto - устанавливает поле на авто

Попробуйте использовать класс как .px-4

* 10 44 *

Руда, вы можете использовать стиль атрибут как 

<div class="row padding-xs" style="padding: 0 10px 0 10px;">
0 голосов
/ 31 марта 2020

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

@media screen and (max-width: 992px) {
  .card { padding: 0px 50px 0px; }
}

Максимальная ширина означает, что всякий раз, когда разрешение экрана составляет 992px или меньше, запускайте следующую команду css.

Подробнее о медиа-запросах читайте здесь.

...