【问题标题】：Bootstrap card padding on phone手机上的引导卡填充
【发布时间】：2020-07-10 21:57:10
【问题描述】：

我需要在引导程序中为卡的右侧和左侧添加填充，但我无法做到。这是代码：（引导程序 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>

【问题讨论】：

假设您指的是<div class="card-body">，添加类pl-5 和pr-5 用于左右5px 的内边距。 <div class="card-body pl-5 pr-5">

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

BS4 中的 padding 遵循以下规则：

公式{padding}{sides}-{size}，其中

p - 设置填充

其中边是以下之一：

t - 设置 padding-top

b - 设置 padding-bottom

l - 设置 padding-left

r - 设置 padding-right

x - 设置 padding-left 和 padding-right

y - 设置 padding-top 和 padding-bottom

空白 - 在元素的所有 4 个边上设置边距或填充

其中大小是以下之一：

0 - 将填充设置为 0

1 - 将填充设置为 .25rem（如果字体大小为 16px，则为 4px）

2 - 将填充设置为 .5rem（如果字体大小为 16px，则为 8px）

3 - 将填充设置为 1rem（如果字体大小为 16px，则为 16px）

4 - 将 padding 设置为 1.5rem（如果 font-size 为 16px，则为 24px）

5 - 将内边距设置为 3rem（如果字体大小为 16px，则为 48px）

auto - 将边距设置为自动

尝试使用像 .px-4

这样的类

<div class="row px-4" style="padding: 0 10px 0 10px;">

或者你可以使用 style 属性，比如

<div class="row padding-xs" style="padding: 0 10px 0 10px;">

【讨论】：

【解决方案2】：

假设你指的是

<div class="card-body">

为左右 5px 内边距添加类 pl-5 和 pr-5。

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

“5”表示要填充的像素数。您可以根据需要更改该数字。

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

【讨论】：

【解决方案3】：

您的标题说您正在将此填充添加到手机中，如果我理解正确，您希望填充具有响应性，以便仅在手机上查看网站时应用。您可以通过向您的 styles.css 添加一个非常简单的媒体查询来做到这一点。

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

最大宽度规定，只要屏幕分辨率为 992px 或更小，就运行以下 css。