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

乍一看，似乎这可能是一个基本的clearfix问题。我注意到你正在使用bootstrap＆＃34;＆＃34;拉左＆＃34;辅助类和向父元素添加一个clearfix类应该解决这个问题。可以在此处找到文档：http://getbootstrap.com/css/#helper-classes-clearfix

我不完全确定为什么你需要首先浮动这个标题...也许需要更好地理解引导列系统，因为这可能是你问题的根源。

更新的答案：

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

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

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

Answer 2

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

中

＆＃13;

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

＆＃13;

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

＆＃13;

你的HTML：

＆＃13;

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

＆＃13;

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

＆＃13;

div上的HTML边框，在div之外，带有边框样式

2 个答案: