Bootstrap，CSS - 跨行自动缩进答案

【问题标题】：Bootstrap, CSS - span within row auto indentingBootstrap，CSS - 跨行自动缩进
【发布时间】：2020-01-18 02:48:57
【问题描述】：

在我的项目中，我实现了引导程序并使用它的网格系统。我创建了一行，然后在行内添加了一个跨度作为列 (col-12)。

我使用的这个跨度带下划线，我在跨度内添加  元素以分隔行。第一行比其他两行自动缩进更多。我尝试使用 &nbsp; 标记，但这不起作用，因为我的文本带有下划线，并且它会在文本之前创建不需要的下划线。

有人知道这个问题吗？谢谢。

这是我的代码：

.mainBodyTxt {
  color: white;
  position: relative;
  font-family: 'Roboto', sans-serif;
  font-size: 54px;
  z-index: 2;
  left: 200px;
}
.container-fluid {
  background:lightgrey;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <!-- <div class="col-md-4 col-lg-6">-->
    <u style="color: white;"><span class="col-12 mainBodyTxt">I really like <br>
    Blue <br>Sandwiches</span> </u>
  </div>
</div>

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

你的布局给你一个正确的缩进可能是因为你在之外使用了

col-x 元素应该是 row 元素的直接后代！

要解决这个问题，您可以：

将 标签放在span 内（示例1）
删除 标签并为span 赋予CSS 属性text-decoration:underline（示例2）
删除 标签并为u 提供col-12 mainBodyTxt 类（示例3）

.mainBodyTxt {
  color: white;
  position: relative;
  font-family: 'Roboto', sans-serif;
  font-size: 54px;
  z-index: 2;
  left: 200px;
}
.container-fluid {
  background:lightgrey;
}
.mainBodyTxtUnderlined{
  color: white;
  text-decoration:underline;
  position: relative;
  font-family: 'Roboto', sans-serif;
  font-size: 54px;
  z-index: 2;
  left: 200px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="" crossorigin="anonymous">

<!-- example 1 -->
<div class="container-fluid">
  <div class="row">
    <span class="col-12 mainBodyTxt"><u style="color: white;">I really like <br>
    Blue <br>Sandwiches</u></span> 
  </div>
</div>
<br>

<!-- example 2 -->
<div class="container-fluid">
  <div class="row">
   <span class="col-12 mainBodyTxtUnderlined">I really like <br>
    Blue <br>Sandwiches</span>
  </div>
</div>
<br>
<!-- example 3 -->
<div class="container-fluid">
  <div class="row">
    <u class="col-12 mainBodyTxt">I really like <br>
    Blue <br>Sandwiches</u>
  </div>
</div>

【讨论】：

谢谢伙计。像魅力一样工作！