左右引导填充不起作用

Posted 2023-03-21

技术标签:

【中文标题】左右引导填充不起作用【英文标题】：Bootstrap padding left and right is not working 【发布时间】：2021-11-16 22:20:16 【问题描述】：

我正在学习引导程序，今天我想使用边距和填充，但处理这些我面临引导程序的奇怪行为，每当我应用整体填充或填充顶部或填充底部时它工作得非常好，但是当我应用填充左或向右填充，根本不会影响页面，左边距和右边距的情况完全相同，任何人都可以在这方面帮助我谢谢：

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="Bootstrap/bootstrap.css">
  <title>Document</title>
  <style>
    .containerborder: 4px solid #000;
    .rowborder: 3px solid indianred;
    .pinkbackground: lightpink;
    .orangebackground: orange;
    .cyanbackground: cyan;
    .bluebackground: lightblue;
    .col,.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12border: 2px solid blue;
  </style>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-6 p-5 orange">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit ex magni soluta, odio sed nihil.
    </div>
    <div class="col-4 pl-5 blue">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, quos. ipsum dolor sit amet, consectetur adipisicing elit. Beatae, alias.
    </div>
  </div>
</div>
</body>
</html>

【问题讨论】：

您使用的是哪个版本的引导程序？你把它扔在那里，用不同的引导程序。另外，您会错过连接到引导程序的 javascript，以防您需要 javascripted 项目，例如花椰菜。 class=row item btw 再次从容器中删除填充，如果我记得在引导程序 3.3.7 中是正确的，它的标准是 -15px。不确定较新的...使用浏览器的元素检查器查看问题所在。 【参考方案1】：

我目前没有使用旧版本我使用的是最新版本我没有包含引导 js 文件可能是它导致问题吗？ ——阿燕

最新版本是v5.1.1，你可以在currents docs中查看notation of spacing utility classes has changed。

这是一个 CSS 问题，不受包含或排除 bootstrap.js 的影响

为了支持从右到左的文本方向，基本上 l 和 r（左/右）已被 s 和 e（开始/结束）取代。所以s 和e 将根据文本方向是LTR 还是RTL 在左右翻转。他们将每个对l/r 和left/right 的引用分别更改为s/e 和start/end，贯穿整个框架。

【讨论】：

Daaaaaamn 老兄。我被困了几个小时，试图找出我的项目中的引导程序有什么问题。拯救了我的周末。谢谢>。 【参考方案2】：

在 bootstrap 中，您需要使用 left 和 right 的类作为左侧边距的 ml 和右侧边距的 mr。这同样适用于填充。例如在这里我已经为您的代码应用了margin left并且它有效，请检查并相应地进行调整：

<div class="col-6 p-5 ml-5 orange">

【讨论】：

是的先生，我做的和你说的完全一样运行良好我试过了，它在我身边有效。您能否再次检查一下您的关闭 div，因为它在我身边工作.. 如果他运行较旧的引导程序 (3.3.7)，它将无法工作，因为这些类不存在。那就是问题所在。请使用最新的引导程序版本。那肯定会奏效。谢谢:) 我目前没有使用旧版本我正在使用最新版本我没有包含引导 js 文件可能是它导致问题吗？

以上是关于左右引导填充不起作用的主要内容，如果未能解决你的问题，请参考以下文章