需要帮助修复引导行中两个 div 之间的差距答案

【问题标题】：Need help fixing gap between two divs in bootstrap row需要帮助修复引导行中两个 div 之间的差距
【发布时间】：2018-04-22 22:17:34
【问题描述】：

我正在处理 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>

这里是 codepen 链接：https://codepen.io/calvinkaing/pen/WXoPRY?editors=1100

【问题讨论】：

在代码笔中，它已经在传记部分旁边。你面临什么问题？
@IronyStack 有一个缺口，它与上面的部分不内联
它不是垂直排列的，因为这两个部分是一排的，而上面的东西不是一排的。对于一个基本站点，我个人建议不要使用 Bootstrap 并使用 CSS Grid 作为您的基本布局和实用程序类（我喜欢 [tachyons|tachyons.io/#getting-started]）。这两件事帮助我能够超级快速地创建新的模型，因为一旦你学习了一些 Tachyons 类，你就不必继续寻找如何以引导方式做事，如果你需要覆盖，你就不必遇到问题东西。
@CalvinNg 检查我的答案，看看我是否有帮助，如果有帮助，请欢呼。如果不通知我。

标签： html css bootstrap-4

【解决方案1】：

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

【讨论】：

另外，不是对 div 的内容进行填充吗？
@CalvinNg 它用于 div 的内容，但由于您希望它们看起来像它们接触，您必须摆脱一侧的间距，或者改为放置红色背景在.col-xs div 上。

【解决方案2】：

您需要定义要使用的列数。 Bootstrap 使用 12 列网格系统。因此，如果您希望 div 彼此相邻，您需要设置 <div class="col-xs-6">

【讨论】：

【解决方案3】：

我刚刚删除了

    margin-left: 5%;
    margin-right: 5%;

我希望它对你有用

<style>
  .content-frame {
    background-color: #F34D57;
    border-style: double;
    text-align: center;
   
    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>

【讨论】：