Bootstrap没有填充按钮和col-md-12之间的填充

Question

我开始做一个Bootstrap布局，但是我注意到在没有使用边距或填充的情况下按钮和我的面板保持在下面后没有任何填充。

JsFiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>

<div class="container-fluid">
  <div class="row">
    <main-contents>
      <div class="col-md-12">
        <h2>title</h2>
      </div>

      <div class="col-md-4">
        <div class="headline-date">Tuesday, January 27, 2012 4:00pm</div>
      </div>
      <div class="col-md-2 col-md-offset-2">
        <button type="button" class="btn btn-primary">
                <i class="fa fa-user-plus" aria-hidden="true"></i>Add
               </button>
      </div>
      <div class="col-md-2">
        <button type="button" class="btn btn-primary">
                <i class="fa fa-calendar" aria-hidden="true"></i>test
               </button>
      </div>
      <div class="col-md-2">
        <button type="button" class="btn btn-primary">
                <i class="fa fa-calendar" aria-hidden="true"></i>Start
               </button>
      </div>


      <div class="col-md-12">
        <div class="panel-group" id="accordion">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#meeting-events">
                      test</a>
              </h4>
            </div>
            <div id="meeting-events" 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">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#executive-action">
                      test</a>
              </h4>
            </div>
            <div id="executive-action" 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">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#hearings">
                      test</a>
              </h4>
            </div>
            <div id="hearings" 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>
      </div>
      <div class="col-md-12">
        content 2
      </div>
    </main-contents>
  </div>
</div>

Answer 1

您尚未添加任何边距或填充。

button{
  width:80px;
  margin:20px;
}
.col-md-12{
  margin-top:50px;

}

这是小提琴link