html - 如何减少时间线面板的分离 Bootstrap

Question

我怎样才能减少每个面板之间的间隔，因为它们目前相距很远，而且当我填充大量空间时，我总是会看到导航栏，我不希望它显示水平栏。

我不想出来吧。填充更少的空间时不应再出现。

这就是我想要的分离方式:

更新:

减少分离:

非常感谢您的帮助

 /* Timeline */

 .timeline,
 .timeline-horizontal {
   list-style: none;
   padding: 20px;
   position: relative;
 }

 .timeline:before {
   top: 40px;
   bottom: 0;
   position: absolute;
   content: " ";
   width: 3px;
   background-color: #eeeeee;
   left: 50%;
   margin-left: -1.5px;
 }

 .timeline .timeline-item {
   margin-bottom: 20px;
   position: relative;
 }

 .timeline .timeline-item:before,
 .timeline .timeline-item:after {
   content: "";
   display: table;
 }

 .timeline .timeline-item:after {
   clear: both;
 }

 .timeline .timeline-item .timeline-badge {
   color: #fff;
   width: 54px;
   height: 54px;
   line-height: 52px;
   font-size: 22px;
   text-align: center;
   position: absolute;
   top: 18px;
   left: 50%;
   margin-left: -25px;
   background-color: #7c7c7c;
   border: 3px solid #ffffff;
   z-index: 100;
   border-top-right-radius: 50%;
   border-top-left-radius: 50%;
   border-bottom-right-radius: 50%;
   border-bottom-left-radius: 50%;
 }

 .timeline .timeline-item .timeline-badge i,
 .timeline .timeline-item .timeline-badge .fa,
 .timeline .timeline-item .timeline-badge .glyphicon {
   top: 2px;
   left: 0px;
 }

 .timeline .timeline-item .timeline-badge.primary {
   background-color: #1f9eba;
 }

 .timeline .timeline-item .timeline-badge.info {
   background-color: #5bc0de;
 }

 .timeline .timeline-item .timeline-badge.success {
   background-color: #59ba1f;
 }

 .timeline .timeline-item .timeline-badge.warning {
   background-color: red;
 }

 .timeline .timeline-item .timeline-badge.danger {
   background-color: #ba1f1f;
 }

 .timeline .timeline-item .timeline-panel {
   position: relative;
   width: 46%;
   float: left;
   right: 16px;
   border: 1px solid #c0c0c0;
   background: #ffffff;
   border-radius: 2px;
   padding: 20px;
   -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
 }

 .timeline .timeline-item .timeline-panel:before {
   position: absolute;
   top: 26px;
   right: -16px;
   display: inline-block;
   border-top: 16px solid transparent;
   border-left: 16px solid #c0c0c0;
   border-right: 0 solid #c0c0c0;
   border-bottom: 16px solid transparent;
   content: " ";
 }

 .timeline .timeline-item .timeline-panel .timeline-title {
   margin-top: 0;
   color: inherit;
 }

 .timeline .timeline-item .timeline-panel .timeline-body>p,
 .timeline .timeline-item .timeline-panel .timeline-body>ul {
   margin-bottom: 0;
 }

 .timeline .timeline-item .timeline-panel .timeline-body>p+p {
   margin-top: 5px;
 }

 .timeline .timeline-item:last-child:nth-child(even) {
   float: right;
 }

 .timeline .timeline-item:nth-child(even) .timeline-panel {
   float: right;
   left: 16px;
 }

 .timeline .timeline-item:nth-child(even) .timeline-panel:before {
   border-left-width: 0;
   border-right-width: 14px;
   left: -14px;
   right: auto;
 }

 .timeline-horizontal {
   list-style: none;
   position: relative;
   padding: 20px 0px 20px 0px;
   display: inline-block;
 }

 .timeline-horizontal:before {
   height: 3px;
   top: auto;
   bottom: 26px;
   left: 56px;
   right: 0;
   width: 100%;
   margin-bottom: 20px;
 }

 .timeline-horizontal .timeline-item {
   display: table-cell;
   height: 280px;
   width: 14%;
   min-width: 220px;
   float: none !important;
   padding-left: 0px;
   padding-right: 20px;
   margin: 0 auto;
   vertical-align: bottom;
 }

 .timeline-horizontal .timeline-item .timeline-panel {
   top: auto;
   bottom: 64px;
   display: inline-block;
   float: none !important;
   left: 0 !important;
   right: 0 !important;
   width: 50%;
   margin-bottom: 20px;
 }

 .timeline-horizontal .timeline-item .timeline-panel:before {
   top: auto;
   bottom: -16px;
   left: 28px !important;
   right: auto;
   border-right: 16px solid transparent !important;
   border-top: 16px solid #c0c0c0 !important;
   border-bottom: 0 solid #c0c0c0 !important;
   border-left: 16px solid transparent !important;
 }

 .timeline-horizontal .timeline-item:before,
 .timeline-horizontal .timeline-item:after {
   display: none;
 }

 .timeline-horizontal .timeline-item .timeline-badge {
   top: auto;
   bottom: 0px;
   left: 43px;
 }

 body {
   overflow-x: hidden;
 }

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="row">
  <div class="col-sm-12 col-md-12 col-lg-12">
    <div style="display: inline-block; width: 100%; overflow-y: auto;">
      <ul class="timeline timeline-horizontal">
        <li class="timeline-item">
          <div class="timeline-badge success"> <i class="glyphicon glyphicon-check"></i> </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title"> 0</h4>
              <p>
            </div>
            <div class="timeline-body">
              <p>---</p>
            </div>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-badge success"> <i class="glyphicon glyphicon-check"></i> </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">1</h4>
              <p>
            </div>
            <div class="timeline-body">
              <p>26039 </p>
            </div>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-badge success"> <i class="glyphicon glyphicon-check"></i> </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title"> 2</h4>
              <p>
            </div>
            <div class="timeline-body">
              <p>26037 </p>
            </div>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-badge success"> <i class="glyphicon glyphicon-check"></i> </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">3</h4>
              <p>
            </div>
            <div class="timeline-body">
              <p>26016 </p>
            </div>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-badge warning"> <i class="glyphicon glyphicon-check"></i> </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">4</h4>
              <p>
            </div>
            <div class="timeline-body">
              <p>---</p>
            </div>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-badge warning"> <i class="glyphicon glyphicon-check"></i> </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">5</h4>
              <p>
            </div>
            <div class="timeline-body">
              <p>---</p>
            </div>
          </div>
        </li>

      </ul>
    </div>
  </div>
</div>

Answer 1

您可以在 .timeline-horizo​​ntal .timeline-item .timeline-panel CSS 中将 margin-bottom 从 20 像素减少到 6 像素。这将使面板更靠近图标。

.timeline-horizontal .timeline-item .timeline-panel {
   top: auto;
   bottom: 64px;
   display: inline-block;
   float: none !important;
   left: 0 !important;
   right: 0 !important;
   width: 50%;
   margin-bottom: 6px;
 }

/* Timeline */

 .timeline,
 .timeline-horizontal {
   list-style: none;
   padding: 20px;
   position: relative;
 }

 .timeline:before {
   top: 40px;
   bottom: 0;
   position: absolute;
   content: " ";
   width: 3px;
   background-color: #eeeeee;
   left: 50%;
   margin-left: -1.5px;
 }

 .timeline .timeline-item {
   margin-bottom: 20px;
   position: relative;
 }

 .timeline .timeline-item:before,
 .timeline .timeline-item:after {
   content: "";
   display: table;
 }

 .timeline .timeline-item:after {
   clear: both;
 }

 .timeline .timeline-item .timeline-badge {
   color: #fff;
   width: 54px;
   height: 54px;
   line-height: 52px;
   font-size: 22px;
   text-align: center;
   position: absolute;
   top: 18px;
   left: 50%;
   margin-left: -25px;
   background-color: #7c7c7c;
   border: 3px solid #ffffff;
   z-index: 100;
   border-top-right-radius: 50%;
   border-top-left-radius: 50%;
   border-bottom-right-radius: 50%;
   border-bottom-left-radius: 50%;
 }

 .timeline .timeline-item .timeline-badge i,
 .timeline .timeline-item .timeline-badge .fa,
 .timeline .timeline-item .timeline-badge .glyphicon {
   top: 2px;
   left: 0px;
 }

 .timeline .timeline-item .timeline-badge.primary {
   background-color: #1f9eba;
 }

 .timeline .timeline-item .timeline-badge.info {
   background-color: #5bc0de;
 }

 .timeline .timeline-item .timeline-badge.success {
   background-color: #59ba1f;
 }

 .timeline .timeline-item .timeline-badge.warning {
   background-color: red;
 }

 .timeline .timeline-item .timeline-badge.danger {
   background-color: #ba1f1f;
 }

 .timeline .timeline-item .timeline-panel {
   position: relative;
   width: 46%;
   float: left;
   right: 16px;
   border: 1px solid #c0c0c0;
   background: #ffffff;
   border-radius: 2px;
   padding: 20px;
   -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
 }

 .timeline .timeline-item .timeline-panel:before {
   position: absolute;
   top: 26px;
   right: -16px;
   display: inline-block;
   border-top: 16px solid transparent;
   border-left: 16px solid #c0c0c0;
   border-right: 0 solid #c0c0c0;
   border-bottom: 16px solid transparent;
   content: " ";
 }

 .timeline .timeline-item .timeline-panel .timeline-title {
   margin-top: 0;
   color: inherit;
 }

 .timeline .timeline-item .timeline-panel .timeline-body>p,
 .timeline .timeline-item .timeline-panel .timeline-body>ul {
   margin-bottom: 0;
 }

 .timeline .timeline-item .timeline-panel .timeline-body>p+p {
   margin-top: 5px;
 }

 .timeline .timeline-item:last-child:nth-child(even) {
   float: right;
 }

 .timeline .timeline-item:nth-child(even) .timeline-panel {
   float: right;
   left: 16px;
 }

 .timeline .timeline-item:nth-child(even) .timeline-panel:before {
   border-left-width: 0;
   border-right-width: 14px;
   left: -14px;
   right: auto;
 }

 .timeline-horizontal {
   list-style: none;
   position: relative;
   padding: 20px 0px 20px 0px;
   display: inline-block;
 }

 .timeline-horizontal:before {
   height: 3px;
   top: auto;
   bottom: 26px;
   left: 56px;
   right: 0;
   width: 100%;
   margin-bottom: 20px;
 }

 .timeline-horizontal .timeline-item {
   display: table-cell;
   height: 280px;
   width: 14%;
   min-width: 125px;
   float: none !important;
   padding-left: 0px;
   padding-right: 20px;
   margin: 0 auto;
   vertical-align: bottom;
 }

 .timeline-horizontal .timeline-item .timeline-panel {
   top: auto;
   bottom: 64px;
   display: inline-block;
   float: none !important;
   left: 0 !important;
   right: 0 !important;
   width: 100%;
   margin-bottom: 6px;
 }

 .timeline-horizontal .timeline-item .timeline-panel:before {
   top: auto;
   bottom: -16px;
   left: 28px !important;
   right: auto;
   border-right: 16px solid transparent !important;
   border-top: 16px solid #c0c0c0 !important;
   border-bottom: 0 solid #c0c0c0 !important;
   border-left: 16px solid transparent !important;
 }

 .timeline-horizontal .timeline-item:before,
 .timeline-horizontal .timeline-item:after {
   display: none;
 }

 .timeline-horizontal .timeline-item .timeline-badge {
   top: auto;
   bottom: 0px;
   left: 43px;
 }

 body {
   overflow-x: hidden;
 }

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="row">
  <div class="col-sm-12 col-md-12 col-lg-12">
    <div style="display: inline-block; width: 100%; overflow-y: auto;">
      <ul class="timeline timeline-horizontal">
        <li class="timeline-item">
          <div class="timeline-badge success"> <i class="glyphicon glyphicon-check"></i> </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title"> 0</h4>
              <p>
            </div>
            <div class="timeline-body">
              <p>---</p>
            </div>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-badge success"> <i class="glyphicon glyphicon-check"></i> </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">1</h4>
              <p>
            </div>
            <div class="timeline-body">
              <p>26039 </p>
            </div>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-badge success"> <i class="glyphicon glyphicon-check"></i> </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title"> 2</h4>
              <p>
            </div>
            <div class="timeline-body">
              <p>26037 </p>
            </div>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-badge success"> <i class="glyphicon glyphicon-check"></i> </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">3</h4>
              <p>
            </div>
            <div class="timeline-body">
              <p>26016 </p>
            </div>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-badge warning"> <i class="glyphicon glyphicon-check"></i> </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">4</h4>
              <p>
            </div>
            <div class="timeline-body">
              <p>---</p>
            </div>
          </div>
        </li>
        <li class="timeline-item">
          <div class="timeline-badge warning"> <i class="glyphicon glyphicon-check"></i> </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">5</h4>
              <p>
            </div>
            <div class="timeline-body">
              <p>---</p>
            </div>
          </div>
        </li>

      </ul>
    </div>
  </div>
</div>