Question

我正在从FreeCodeCamp开始研究第一个项目，并向一位知名人士致敬。我正在为一名女子曲棍球运动员做一个。

我的问题是，我希望她的职业生涯部分与她的传记信息相邻，并与他们上面的章节对齐。

＆＃13;

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

＆＃13;

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

Answer 1

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

Answer 2

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

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

需要帮助修复bootstrap行中两个div之间的差距

3 个答案: