Alert 可以使用Boostrap 4间距移除警报div周围的空间

我使用Bootstrap4创建了一个简单的警报。由于某些原因，我无法使邮件中的文本与（I）图标顶部对齐。我曾尝试将div的边距和填充设置为0，但没有任何效果。有人能解释一下如何解决这个问题吗？我希望文本的顶部与卡中图标的顶部对齐，并且卡垂直和水平居中

代码如下：

  <div class="container">
    <div class="row">
      <div class="col-sm-9 col-md-10">
        <div class="panel panel-default">
          <div class="panel-body">
            <div class="col-xs-12 alert alert-info">
              <i class="fa fa-info-circle fa-3x" aria-hidden="true"></i>
              <div class="pt-0 mt-0">
                My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of
                text for several lines! My message here. Lots of text for several lines!
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

我的留言在这里。多行文字！我的留言在这里。多行文字！我的留言在这里。很多
几行文字！我的留言在这里。多行文字！

我试过pt-0和mt-0，但没有效果

更新：如下所述，面板应更换为卡。我可以接近下面的答案：

 <div class="container">
    <div class="row justify-content-center h-100">
      <div class="col-sm-9 col-md-10 my-auto">
        <div class="card border-0">
          <div class="card-block">
            <div class="col-xs-12 alert alert-info">
              <i class="fa fa-info-circle fa-3x float-left mr-2" aria-hidden="true"></i>
              <div>
                My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of
                text for several lines! My message here. Lots of text for several lines!
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

我的留言在这里。多行文字！我的留言在这里。多行文字！我的留言在这里。很多
几行文字！我的留言在这里。多行文字！

---

但无法使其如所述垂直居中整个卡片

在包装元素

中使用

.row

，然后根据您希望如何分配该行，为其指定列。在本例中，我使用了

.col-1

和

.col-10

引导程序4中的

.col-1

与前面的

col-xs-1

相同。 更多信息请查看

我的留言在这里。多行文字！我的留言在这里。多行文字！我的留言在这里。很多
几行文字！我的留言在这里。多行文字！

---

@TSG，也许这就是你要找的

您可以在

i

元素上使用

float left

，以及

mr-2

在图标和文本之间留出一些间距

 <div class="container">
    <div class="row">
      <div class="col-sm-9 col-md-10 my-auto">
        <div class="card border-0">
          <div class="card-block">
            <div class="col-xs-12 alert alert-info">
              <i class="fa fa-info-circle fa-3x float-left mr-2" aria-hidden="true"></i>
              <div>
                My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of
                text for several lines! My message here. Lots of text for several lines!
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

---

您可以在图标上使用左浮动类和一些右填充（pr-2），这样就可以了

我的留言在这里。多行文字！我的留言在这里。多行文字！我的留言在这里。多行文字！我的留言在这里。多行文字！我的留言在这里。多行文字！我的留言在这里。多行文字！我的留言在这里。多行文字！我的留言在这里。多行文字！我的留言在这里。多行文字！我的留言在这里。多行文字！

引导程序4中没有面板类。而且，标题似乎没有描述这个问题。你能澄清一下吗？您是要垂直对齐图标和警告文本，还是要删除填充/边距。是-关闭！正如ZimSystem在上面指出的那样，我必须更换面板，在Bootstrap4中，面板被卡替换。还有，你能把这个垂直线居中吗？（我已经更新了我的代码和你的答案中的代码），你是不是试图把警报集中在屏幕中间？是的——确切地说。代码（在上面更新）水平居中，但不垂直居中。我曾尝试将h-100添加到各种元素中，但即使包含div的元素也似乎从未超出卡的高度。我尝试了上面链接中列出的3种方法，但似乎都不起作用。不-容器周围的东西限制了高度。这是一个角度4应用程序与路由器出口控制输出。因此，不确定如何将高度应用于周围的容器。您可以将其放入组件的.css文件（或您使用的任何css预处理器的文件扩展名）中，但您的设置超出了原始问题的范围。您可能最好重新表述您的问题，包括您需要在使用angular 4时解决这一问题的事实，以及相关的代码。这可以垂直居中而不强制将边距设置为百分比吗？@TSG使用

对齐项目中心

更新了我的答案。这是你想要的

 <div class="container">
    <div class="row">
      <div class="col-sm-9 col-md-10 my-auto">
        <div class="card border-0">
          <div class="card-block">
            <div class="col-xs-12 alert alert-info">
              <i class="fa fa-info-circle fa-3x float-left mr-2" aria-hidden="true"></i>
              <div>
                My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of
                text for several lines! My message here. Lots of text for several lines!
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

.container {
  position: absolute;
  top: 40%;
  left: 30%;
}