div上带有边框样式的div外部的HTML边框

Question

我目前正在经历以下问题，我不希望Samples这个词包装在一个边界中，我想说的是示例(它周围没有边界)，它下面有一个<hr，然后是一个有边界的div列表。我不知道为什么样品是在这里，因为它是在我的边缘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

行为来源于引导风格。为了避免这种情况，请将每一行封装在一个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>

​

Answer 2

乍一看，这似乎是一个基本的明确问题。我注意到您正在使用引导程序的“拉左”助手类，并在父元素中添加一个清除修复类来修复这个问题。文档可以在这里找到：http://getbootstrap.com/css/#helper-classes-clearfix

我不完全确定为什么您需要在第一个place...maybe中浮动这个标题--需要更好地理解引导列系统，因为这可能是问题的根源。

最新答复：

<div style="margin-top: 75px">
    <h3 style="font-size: 45px">Samples</h3>
</div>

http://codepen.io/wgallop99/pen/Myeppy

删除拉左类和col-md-12部分修复它，但再次，如果您没有正确地使用引导列类，您可能会遇到更多的麻烦。