html - 需要帮助修复引导行中两个 div 之间的间隙

Question

我正在从事 FreeCodeCamp 的第一个元素，它是为一位知名人士制作一个致敬页面。我正在对一名女子曲棍球运动员进行研究。

我的问题是我希望她的职业成就部分位于她的传记信息旁边，并与上面的部分对齐。

<style>
  .content-frame {
    background-color: #F34D57;
    border-style: double;
    text-align: center;
    margin-left: 5%;
    margin-right: 5%;
    padding-top: 5px;
    border-width: 6px;
  }
  
  .imageborder {
    border-width: 2px;
    border-style: solid;
    border-color: #FFFFFF;
  }
</style>
</head>
<div class="container-fluid">
  <div class="row">
    <div id="biographical-info" style="padding: 5px 5px 5px 5px" class="bio content-frame">
      <div class="col-xs">
        <b>Birthdate:</b> March 28, 1991
        <br>
        <b>Birthplace:</b> Beauceville, QC, CANADA
        <br>
        <b>Position:</b> Forward
        <br>
        <b>Playing Career:</b> 2007–present
        <br>
        <b>Shoots:</b> Left
        <br>
        <b>National Team:</b> Canada
      </div>
    </div>
    <div id="career" style="padding: 5px 5px 5px 5px" class="career content-frame">
      <div class="col-xs">
        <h3>
          <u>Notable Career Acheivements:</u>
        </h3>
        <p>
          <u>World Under-18 Championships:</u>
          <br>
          <b>Silver</b> (2008)
        </p>
        <p>
          <u>World Championships:</u>
          <br>
          <b>Gold</b> (2012), <b>Silver</b> (2009, 2011, 2013, 2015, 2016, 2017)
        </p>
        <p>
          <u>Winter Olympics:</u>
          <br>
          <b>Gold</b> (2010, 2014)
        </p>
      </div>
    </div>
  </div>

这是代码笔链接:https://codepen.io/calvinkaing/pen/WXoPRY?editors=1100

Answer 1

您不需要将列包装在 div 中，它应该是 .row 然后直接在 .col-xs 之后。将列包装在另一个 div 中是搞砸了。将外部 div 移动到内部，它应该使您的内容并排。从那里如果你想让两个盒子的垂直边缘接触，你可以分别删除每个盒子的 padding-right 和 padding-left 。