如何相对于引导容器定位元素？

Question

所以我有类似的东西

<div id="all-courses">All courses</div>
<div class="container">
   <div class="row">
     <div class="col-md-9">
.
.
.
</div>

所以我希望all-course div从与bootstrap容器完全相同的方式开始。我听说bootstrap将它自己的边距样式应用到容器中并更改它以使其响应。我只是希望所有课程的div始终坚持容器的开头。我该怎么做呢？

展开码

＆＃13;

＆＃13;

<div class="body-content">
  <div id="all-courses">All courses</div>
  <div class="container">
    <div class="row">
      <div class="col-md-9">
        <div class="box">
          <div>
            <img id="box-img" src="http://www.robocup2016.org/media/leagues/eindhoven/albert-van-bremen/robocup-soccer-small-size_Albert-van-Breemen-2_R220X0.jpg">
          </div>
          <div id="text">
            <span id="icon-needed">icon</span>
            <span id="course-name">Course name here</span>
          </div>
        </div>
        <div class="box">
          <div>
            <img id="box-img" src="http://www.robocup2016.org/media/leagues/eindhoven/albert-van-bremen/robocup-soccer-small-size_Albert-van-Breemen-2_R220X0.jpg">
          </div>
          <div id="text">
            <span id="icon-needed">icon</span>
            <span id="course-name">Course name here</span>
          </div>
        </div>
        <div class="box">
          <div>
            <img id="box-img" src="http://www.robocup2016.org/media/leagues/eindhoven/albert-van-bremen/robocup-soccer-small-size_Albert-van-Breemen-2_R220X0.jpg">
          </div>
          <div id="text">
            <span id="icon-needed">icon</span>
            <span id="course-name">Course name here</span>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="stats">
          <div class="profile-stats">
            <div class=stats-header>PROFILE STATISTICS</div>
            <div>
              <span></span>
              <span class=stats-detail-data>241 Medals</span>
            </div>
            <div>
              <span></span>
              <span class=stats-detail-data>95% accurate answers</span>
            </div>
            <div>
              <span></span>
              <span class=stats-detail-data>200 questions/hour</span>
            </div>
          </div>
          <div>
            <hr>
          </div>
          <div class="top-scores">
            <div class=stats-header>TOP SCORERS</div>
            <div>
              <span></span>
              <span class="stats-detail-data">Data 0</span>
              <span class="stats-detail-no">123</span>
              <span></span>
            </div>
            <div>
              <span></span>
              <span class="stats-detail-data">Data 1</span>
              <span class="stats-detail-no">123</span>
              <span></span>
            </div>
            <div>
              <span></span>
              <span class="stats-detail-data">Data 2</span>
              <span class="stats-detail-no">123</span>
              <span></span>
            </div>
            <div>
              <span></span>
              <span class="stats-detail-data">Data 3</span>
              <span class="stats-detail-no">123</span>
              <span></span>
            </div>
          </div>
          <div>
            <hr>
          </div>
          <div class="medal-graph">
            <div>MEDAL GRAPH</div>
            <div></div>
          </div>
          <div>
            <hr>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;