Question

我正在使用bootstrap开发我的网页，我是新手。我的页面有<h1>，<h2＆gt;和<h3>。我的页面的标题，标题和副标题。现在所有这些都是垂直间隔的。所以我使用样式margin-bottom:20px给出了一些垂直间距;它工作正常。

这是从bootstrap标准做到这一点的正确方法。最好的方法是什么？硬编码20px是理想的吗？

Answer 1

默认在Bootstrap 3中，它的底部为10px，顶部边缘为20px。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<div class="container" ng-controller="cntrl">
  <p>
    No angular:
  </p>
  <div class="panel-group" id="accordion">
    <div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
      <div class="panel-heading">
        <h4 class="panel-title">
          Collapsible Group 1
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
      <div class="panel-heading">
        <h4 class="panel-title">
          Collapsible Group 2
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse3">
      <div class="panel-heading">
        <h4 class="panel-title">
          Collapsible Group 3
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
  </div>

  <!-- now using angular -->
  <p>
    Using angular (<em>notice the previous panel no longer collapses and the spacing between the panels does not exist like in my no angular example</em>):
  </p>
  <div class="panel-group" id="ngaccordion">
    <div ng-repeat="prop in someObj" class="panel panel-default" data-toggle="collapse" data-parent="#ngaccordion" data-target="#{{prop.id}}">
      <div class="panel-heading">
        <h4 class="panel-title">
          {{prop.contractName}}
        </h4>
      </div>
      <!-- Instead of {{prop.id}} for id below and data-target above I have also tried "test{{$index}}" -->
      <div id="{{prop.id}}" class="panel-collapse collapse" ng-class="{ 'in' : $first}">
        <div class="panel-body">
          <ul class="list-group">
            <li class="list-group-item">
              <label>Price:</label> {{prop.price | currency:"$" }}</li>
            <li class="list-group-item">
              <label>Start Date:</label> {{prop.startDate}}</li>
            <li class="list-group-item">
              <label>End Date:</label> {{prop.endDate}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

响应于页面的引导程序中标题之间的垂直间距

1 个答案: