css - Handlebars+BootStrap卡边框

Question

我正在使用 Bootstrap 4 和一些带有选项卡和标题的嵌套卡片。我在这些卡片中有表格。我还使用 Handlebars 读取 JSON 数据并填充表单。

当我从硬编码数据切换到使用 Handlebars 来填充表单时，除第一张卡片外的所有卡片周围的边框都消失了。

Handlebars.registerHelper("incIndex",function(property){
    var index = property + 1;
  str = index.toString();
    return str;
});

$(function() {
  let template = Handlebars.compile($("#deliveries-template1").html());

  let data = [{
    "name": "Acme",
    "city": "Seattle",
    "reference": "1905421",
    "units": "5",
  }, {
    "name": "CostLess",
    "city": "Redmond",
    "reference": "2105413",
    "units": "1",
  },{
    "name": "FastRepair",
    "city": "Lynden",
    "reference": "1994512",
    "units": "12",
  }];

  $('#delCard1').html(template(data));

});

JSFiddle

Answer 1

边框应用于卡片类。您仅在包装器 div 上使用 card 类。所以只有 1 个边框。从要附加 Handlebars 模板的 div 中删除 card 类，并将其添加到 Handlebars 模板的 each 部分。我向其中添加了另一个 mb-2 类，以便 2 张卡片之间有一些空间。

{{#each this}}
     <div class="card mb-2">

Handlebars.registerHelper("incIndex", function(property) {
  var index = property + 1;
  str = index.toString();
  return str;
});

$(function() {

  //get custom template
  var template = Handlebars.compile($("#deliveries-template1").html());

  var data = [{
    "name": "Acme",
    "city": "Seattle",
    "reference": "1905421",
    "units": "5",
  }, {
    "name": "CostLess",
    "city": "Redmond",
    "reference": "2105413",
    "units": "1",
  }, {
    "name": "FastRepair",
    "city": "Lynden",
    "reference": "1994512",
    "units": "12",
  }];

  $('#delCard1').html(template(data));

});

.deliveries {
  height: 500px;
  width: 300px;
  top: 50px;
  position: fixed;
}

#delivery_mastercard {
  margin-top: 50px;
  margin-bottom: 0 !important;
  margin-left: 25px;
  margin-right: 0 !important;
  width: 300px;
}

#delivery_mastercard_body {
  padding-top: 5px;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#deliveryTabCard_body {
  padding-top: 5px;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.delivery_card_1_body {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 10 !important;
  padding-left: 10px;
  padding-right: 10px;
}

.delivery_card_2_body {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 10px;
  padding-right: 10px;
}

#bootstrap_overrides .form-group {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

#bootstrap_overrides .form-control {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

#bootstrap_overrides .form-control-label {
  margin-top: 0;
  margin-bottom: 5px;
  margin-left: 0;
  margin-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  font-size: 10pt;
}

#deliveryTabCard {
  height: 346px;
  /** 346 full height **/
}

#deliveryTabCard_body {
  overflow-y: auto;
}

#formGroup4 {
  margin-top: 0 !important;
  margin-bottom: 5px;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

.delcard1 {
  height: 285px;
}

<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.js"></script>
<div class="container" id="bootstrap_overrides">
  <div class="row">

    <div class="col-5"></div>


    <!--------------- Begin Deliveries -------------------->
    <div class="col-3 offset-lg-3">
      <div class="card border-primary" id="delivery_mastercard">
        <div class="card-header">
          <h4>Deliveries</h4>
        </div>
        <div class="card-body" id="delivery_mastercard_body">

          <div class="card" id="deliveryTabCard">
            <div class="card-header" id="cheader">
              <ul class="nav nav-tabs card-header-tabs" role="tablist">
                <li class="nav-item">
                  <a class="nav-link active" data-toggle="tab" href="#East" role="tab">East</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" data-toggle="tab" href="#West" aria-controls="contact" aria-selected="false">West</a>
                </li>
              </ul>
            </div>

            <div class="card-body" id="deliveryTabCard_body">
              <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="East">
                  <div class="delcard1" id="delCard1">
                    <script id="deliveries-template1" type="text/x-handlebars-template">

                      {{#each this}}
                      <div class="card mb-2">
                        <div class="card-header">
                          <h6 class="del_header">East Delivery #{{incIndex @index}}</h6>
                        </div>
                        <div class="card-body delivery_card_1_body">
                          <form>
                            <div class="form-group">
                              <label class="form-control-label" for="formGroup1">Company</label>
                              <input type="text" class="form-control" id="formGroup1" value={{name}}>
                            </div>
                            <div class="form-group">
                              <label class="form-control-label" for="formGroup2">City</label>
                              <input type="text" class="form-control" id="formGroup2" value={{city}}>
                            </div>
                            <div class="form-group">
                              <label class="form-control-label" for="formGroup3">Reference</label>
                              <input type="text" class="form-control" id="formGroup3" value={{reference}}>
                            </div>
                            <div class="form-group">
                              <label class="form-control-label" for="formGroup4">Handling Units</label>
                              <input type="text" class="form-control" id="formGroup4" value={{units}}>
                            </div>
                          </form>
                        </div>
                        <!-- /delivery_card_1_body (SEK)-->
                      </div>
                      {{/each}}

                    </script>
                  </div>
                  <!-- /delcard1 (SEK)-->
                </div>
                <!-- /tabpanel (SEK) -->


                <div role="tabpanel" class="tab-pane" id="West">
                  <div class="card delcard1">
                    <div class="card-header">
                      <h6>West Delivery #1</h6>
                    </div>
                    <div class="card-body delivery_card_2_body">
                      <form>
                        <div class="form-group">
                          <label class="form-control-label" for="formGroup1">Company</label>
                          <input type="text" class="form-control" id="SEAformGroup1">
                        </div>
                        <div class="form-group">
                          <label class="form-control-label" for="formGroup2">City</label>
                          <input type="text" class="form-control" id="SEAformGroup2">
                        </div>
                        <div class="form-group">
                          <label class="form-control-label" for="formGroup3">Reference</label>
                          <input type="text" class="form-control" id="SEAformGroup3">
                        </div>
                        <div class="form-group">
                          <label class="form-control-label" for="formGroup4">Handling Units</label>
                          <input type="text" class="form-control" id="SEAformGroup4">
                        </div>
                      </form>
                    </div>
                    <!-- /SEA card-body 1 -->
                  </div>
                  <!-- /SEA card 1 -->
                </div>
                <!-- /tabpanel (SEA) -->
              </div>
              <!-- /tab-content -->
            </div>
            <!-- /tabed-card-body -->
          </div>
          <!-- /deliveryTabCard -->
        </div>
        <!-- /delivery card-body -->
      </div>
      <!-- /delivery card -->
    </div>
    <!-- /col-3 -->
  </div>
  <!-- /col-5 -->
</div>
<!-- /container -->