jquery - 文本列和图标对齐

Question

我的专栏中的文本有问题，可能是整个设置的方式或者它的 Bootstrap 本身，代码很糟糕，但欢迎提供提示。 无论如何，如下图所示，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;
}