div 上的 HTML 边框位于具有边框样式的 div 外部

Question

我目前遇到以下问题，我不想使用 Samples 这个词包裹在边框中，我想用 <hr 表示 sample (周围没有边框)在它下面，然后是它下面有一个边框的 div 列表。我不确定为什么 Samples 在这里被包围，因为它在我的带边框的 div 之外。请注意，我确定没有其他带边框的 div 包装此 html。下面的屏幕截图和 HTML:

HTML:

<div class="col-md-12" style="margin-top: 75px">
        <h3 class="pull-left" style="font-size: 45px">Samples</h3>
    </div>
    <div class="col-md-12">
        <hr>
    </div>

    <div ng-controller="SamplesQueryController">
        <div style="border: 1px solid #000000">
            <div ng-repeat="item in data" style="margin-left: 14px">
                <a href="#/sample/{{item.id}}"
                    style="font-size: 34px; text-decoration: underline">{{item.name}}</a>
                <br> <span style="font-size: 20px">{{item.description}}</span><br>
                <hr>
            </div>
        </div>
    </div>

Answer 1

行为来自 Bootstrap 风格。 为避免这种情况，将每一行包装在 class="row" div

中

html {padding:2em; /*demo*/}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-12" style="margin-top: 75px">
    <h3 class="pull-left" style="font-size: 45px">Samples</h3>
  </div>
  <div class="col-md-12">
    <hr>
  </div>
</div>
<div class="row">
  <div ng-controller="SamplesQueryController">
    <div style="border: 1px solid #000000">
      <div ng-repeat="item in data" style="margin-left: 14px">
        <a href="#/sample/{{item.id}}" style="font-size: 34px; text-decoration: underline">{{item.name}}</a>
        <br> <span style="font-size: 20px">{{item.description}}</span><br>
        <hr>
      </div>
    </div>
  </div>
</div>

---

你的 html :

    html {padding:2em; /*demo*/}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12" style="margin-top: 75px">
        <h3 class="pull-left" style="font-size: 45px">Samples</h3>
    </div>
    <div class="col-md-12">
        <hr>
    </div>
    <div ng-controller="SamplesQueryController">
        <div style="border: 1px solid #000000">
            <div ng-repeat="item in data" style="margin-left: 14px">
                <a href="#/sample/{{item.id}}"
                    style="font-size: 34px; text-decoration: underline">{{item.name}}</a>
                <br> <span style="font-size: 20px">{{item.description}}</span><br>
                <hr>
            </div>
        </div>
    </div>