文本列和图标对齐方式

Question

我的专栏中的文字有问题，也许它是整个设置的方式，也可能是它自己的引导程序，代码很糟糕但欢迎提示。 无论如何，col-md-2文本不对齐，如下图所示。我相信它应该留在它的专栏？我该如何解决这个问题？

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
    <script src="https://use.fontawesome.com/f4737361cc.js"></script>
<div class="container profile-container">
  <div class="row">
      <div class="col-md-9 pb-5">
          <div class="col-md-12">
              <h2>Titel van de post</h2>
              <hr>
          </div>
          <div class="col-md-2">
              <img src="img/foto.jpg" alt="" width="92" class="rounded-circle pb-3">
              <p class="m-0"><b>Rainier laan</b></p>
              <p class="m-0">Programmeur/Webdeisgnerasdddddddddddddddddddd</p>
          </div>
          <div class="col-md-10">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet distinctio eos error eveniet ex mollitia non praesentium saepe! Nemo quas quos ullam. Consectetur distinctio ipsa ipsam non quia, recusandae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolorum mollitia odit porro provident? Consectetur cumque dolores earum error ipsa ipsum molestiae necessitatibus numquam odit provident quis, quos, repudiandae rerum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet fuga, modi. Adipisci aliquid beatae consequuntur distinctio dolorem error, eum explicabo maiores minus officia placeat porro ratione reiciendis sit ullam voluptatem.</p>
          </div>
          <div class="col-md-2">

          </div>
          <div class="col-md-10">
              Tags: <span class="badge badge-secondary">Secondary</span> <span class="badge badge-secondary">Secondary</span> <span class="badge badge-secondary">Secondary</span>
          </div>
          <div class="col-md-2">

          </div>
          <div class="col-md-10 pt-4">
              <a href=""><i class="fa fa-thumbs-o-up" style="font-size: 24px;"></i></a>1
              <a href=""><i class="fa fa-thumbs-o-down" style="font-size: 24px;"></i></a> 2
          </div>
      </div>
  </div>
</div>

此外，有没有办法更好地对齐拇指图标？此外，我试图让他们能够有一个循环，如果人点击它，它会+1。现在我不能这样做，因为它的构建方式。我该如何解决这个问题？

提前致谢！

Answer 1

查看https://css-tricks.com/almanac/properties/o/overflow-wrap/

这个CSS将解决文本溢出div的问题。

p {
    overflow-wrap: break-word;
}