Bootstrap 4卡片手机端左右内边距设置问题求助

嘿，我来帮你搞定这个Bootstrap卡片左右内边距的问题！看了你的代码，核心问题在于卡片内的不同模块（图片容器、card-body、输入组）左右内边距没有统一，而且卡片本身默认没有左右padding，导致视觉上不对齐。下面给你两种简单的解决方案：

方案一：给整个卡片统一添加左右内边距 #

直接给card元素加上Bootstrap内置的间距类px-3，这样卡片内部所有元素都会自动继承统一的左右内边距，不用再单独给子元素设置：

<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 px-3" style="width: 30rem;"> <!-- 新增px-3类 -->
<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 pt-3 pb-5"> <!-- 移除原有的pr-3 pl-3 -->
<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>

方案二：统一子元素的左右内边距 #

如果你不想给整个卡片加padding，也可以给图片容器补上px-3，和输入组的内边距保持一致，同时让card-body的padding匹配：

<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 px-3"> <!-- 新增px-3类 -->
<img class="card-img-top" src="question.svg" alt="Card image cap" height="128px" width="128px">
</div>
<div class="card-body px-3"> <!-- 新增px-3类，和其他模块保持一致 -->
<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>

额外小提示 #

Bootstrap 4的间距类规则是p{t/r/b/l/x/y}-{0-5}：

• x代表左右方向，y代表上下方向
• 数字3对应1rem的间距，和你原本用的pr-3 pl-3完全匹配
• 如果觉得内边距大小不合适，可以换成px-2（0.5rem）或px-4（1.5rem）调整

内容的提问来源于stack exchange，提问作者Tomáš Roj