Question

我使用Bootstrap 4创建了一个简单的警报。出于某种原因，我无法将消息中的文本与（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但它们没有效果

更新：如下所述，PANEL应替换为CARD。我可以接近以下答案：

 <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>

但无法让它按照in this SO answer

所述的方式垂直居中整张卡

Answer 1

在包装元素.row中使用<div class="row alert alert-info">，然后根据您要分配该行的方式，为其提供列。在这种情况下，我使用了.col-1和.col-10。

Bootstrap 4中的

.col-1与之前的col-xs-1相同。更多信息请查看Grid system - Boostrap 4 docs

 <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">
        <!-- Added the align-items-center class next to row -->
        <div class="row alert align-items-center alert-info">
          <i class="col-1 fa fa-info-circle fa-3x float-left mr-2" aria-hidden="true"></i>
          <div class="col-10">
            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>

Answer 2

@TSG，也许这就是你要找的...... https://codepen.io/cowanjt/pen/rzQzJj

您可以使用float-left元素上的bootstrap 4 utility i以及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>

要将其垂直居中，您可以使用一些CSS来获得所需的外观。 CSS position属性与top和left属性一起将从文档流和其他元素中删除元素。有css-tricks article可以让您深入了解属性及其值。

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

Answer 3

您可以在图标上使用 float-left 类，并在右侧使用一些填充（ pr-2 ），这样就可以了！

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<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 float-left pr-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! 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! 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>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

＆＃13;

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

3 个答案: